<%= form_with model: @website, url: site_admin_website_settings_path, method: :patch, local: true do |f| %>
  <%= hidden_field_tag :tab, 'seo' %>
  <div class="space-y-8">
    <!-- Basic SEO Settings -->
    <div class="bg-white rounded-lg shadow p-6">
      <h2 class="text-lg font-medium text-gray-900 mb-4">Basic SEO Settings</h2>
      <p class="text-sm text-gray-600 mb-6">These defaults are used when pages don't have their own SEO settings.</p>
      
      <div class="space-y-4">
        <div>
          <%= f.label :default_seo_title, "Default Page Title", class: "block text-sm font-medium text-gray-700 mb-1" %>
          <%= f.text_field :default_seo_title, 
              class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
              placeholder: "Your Agency Name | Real Estate in Your City" %>
          <p class="mt-1 text-sm text-gray-500">Appears in browser tabs and search results. Keep it under 60 characters.</p>
        </div>

        <div>
          <%= f.label :default_meta_description, "Default Meta Description", class: "block text-sm font-medium text-gray-700 mb-1" %>
          <%= f.text_area :default_meta_description, 
              rows: 3,
              class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
              placeholder: "Find your dream home with our extensive property listings..." %>
          <p class="mt-1 text-sm text-gray-500">Appears in search results. Keep it between 150-160 characters for best results.</p>
        </div>
      </div>
    </div>

    <!-- Branding -->
    <div class="bg-white rounded-lg shadow p-6">
      <h2 class="text-lg font-medium text-gray-900 mb-4">Branding</h2>
      
      <div class="space-y-4">
        <div>
          <%= f.label :favicon_url, "Favicon URL", class: "block text-sm font-medium text-gray-700 mb-1" %>
          <%= f.url_field :favicon_url, 
              class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
              placeholder: "https://example.com/favicon.ico" %>
          <p class="mt-1 text-sm text-gray-500">The small icon that appears in browser tabs. Use .ico, .png, or .svg format.</p>
        </div>

        <div>
          <%= f.label :main_logo_url, "Logo URL", class: "block text-sm font-medium text-gray-700 mb-1" %>
          <%= f.url_field :main_logo_url, 
              class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
              placeholder: "https://example.com/logo.png" %>
          <p class="mt-1 text-sm text-gray-500">Used for Open Graph sharing and other branding purposes.</p>
        </div>
      </div>
    </div>

    <!-- Social Media / Open Graph -->
    <div class="bg-white rounded-lg shadow p-6">
      <h2 class="text-lg font-medium text-gray-900 mb-4">Social Media Sharing</h2>
      <p class="text-sm text-gray-600 mb-6">These settings control how your website appears when shared on social media.</p>
      
      <div class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Open Graph Image URL</label>
          <%= text_field_tag 'social_media[og_image]', @social_media['og_image'],
              class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
              placeholder: "https://example.com/og-image.jpg" %>
          <p class="mt-1 text-sm text-gray-500">Image shown when sharing on Facebook, LinkedIn, etc. Recommended: 1200x630px</p>
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Twitter Card Type</label>
          <%= select_tag 'social_media[twitter_card]', 
              options_for_select([
                ['Summary', 'summary'],
                ['Summary with Large Image', 'summary_large_image']
              ], @social_media['twitter_card'] || 'summary_large_image'),
              class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" %>
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Twitter Handle</label>
          <%= text_field_tag 'social_media[twitter_handle]', @social_media['twitter_handle'],
              class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
              placeholder: "@yourcompany" %>
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Facebook Page URL</label>
          <%= text_field_tag 'social_media[facebook_url]', @social_media['facebook_url'],
              class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
              placeholder: "https://facebook.com/yourcompany" %>
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Instagram Handle</label>
          <%= text_field_tag 'social_media[instagram_handle]', @social_media['instagram_handle'],
              class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
              placeholder: "@yourcompany" %>
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">LinkedIn URL</label>
          <%= text_field_tag 'social_media[linkedin_url]', @social_media['linkedin_url'],
              class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
              placeholder: "https://linkedin.com/company/yourcompany" %>
        </div>
      </div>
    </div>

    <!-- Search Engine Verification -->
    <div class="bg-white rounded-lg shadow p-6">
      <h2 class="text-lg font-medium text-gray-900 mb-4">Search Engine Verification</h2>
      <p class="text-sm text-gray-600 mb-6">Add verification codes from search engines to prove site ownership. These codes appear as meta tags in your site's HTML head.</p>

      <div class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">
            <svg class="inline w-4 h-4 mr-1 text-blue-500" fill="currentColor" viewBox="0 0 24 24">
              <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
              <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
              <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
              <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
            </svg>
            Google Search Console Verification
          </label>
          <%= text_field_tag 'social_media[google_site_verification]', @social_media['google_site_verification'],
              class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
              placeholder: "Enter verification code (e.g., ABC123xyz...)" %>
          <p class="mt-1 text-sm text-gray-500">
            Find this in Google Search Console under Settings > Ownership verification > HTML tag.
            Copy only the <code class="bg-gray-100 px-1 rounded">content</code> value.
          </p>
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">
            <svg class="inline w-4 h-4 mr-1 text-teal-500" fill="currentColor" viewBox="0 0 24 24">
              <path d="M11.93 0L1.35 11.93l10.58 10.58L22.51 11.93 11.93 0zm0 3.54l7.39 8.39-7.39 8.39-7.39-8.39 7.39-8.39z"/>
            </svg>
            Bing Webmaster Verification
          </label>
          <%= text_field_tag 'social_media[bing_site_verification]', @social_media['bing_site_verification'],
              class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
              placeholder: "Enter verification code" %>
          <p class="mt-1 text-sm text-gray-500">
            Find this in Bing Webmaster Tools under Settings > Ownership verification > XML Meta Tag.
            Copy only the <code class="bg-gray-100 px-1 rounded">content</code> value.
          </p>
        </div>
      </div>

      <!-- Help box -->
      <div class="mt-4 p-3 bg-blue-50 border border-blue-100 rounded-lg">
        <p class="text-sm text-blue-800">
          <strong>How verification works:</strong> After saving, a meta tag will be added to your site's HTML.
          Search engines will detect this tag to verify you own the site.
        </p>
      </div>
    </div>

    <!-- Submit -->
    <div class="flex justify-end">
      <%= f.submit "Save SEO Settings", class: "px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 cursor-pointer" %>
    </div>
  </div>
<% end %>

<!-- SEO Tips -->
<div class="mt-6 p-4 bg-green-50 border border-green-200 rounded-lg">
  <div class="flex">
    <svg class="w-5 h-5 text-green-600 mr-3 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
      <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
    </svg>
    <div>
      <h3 class="text-sm font-medium text-green-800">SEO Tips</h3>
      <ul class="mt-2 text-sm text-green-700 list-disc list-inside space-y-1">
        <li>Keep page titles under 60 characters to avoid truncation in search results</li>
        <li>Meta descriptions between 150-160 characters perform best</li>
        <li>Use unique, descriptive titles for each property page</li>
        <li>Ensure your Open Graph image is at least 1200x630 pixels</li>
        <li>Your sitemap is automatically generated at <code class="bg-green-100 px-1 rounded">/sitemap.xml</code></li>
      </ul>
    </div>
  </div>
</div>
