<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SMS Opt-In - {{businessName}}</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <style>
    body { font-family: 'Inter', sans-serif; }
    .gradient-bg {
      background: linear-gradient(135deg, {{brandColor}}15 0%, {{brandColor}}05 100%);
    }
    .brand-accent { color: {{brandColor}}; }
    .brand-border { border-color: {{brandColor}}; }
    .brand-bg { background-color: {{brandColor}}; }
  </style>
</head>
<body class="bg-gray-50 min-h-screen gradient-bg">
  <div class="max-w-2xl mx-auto px-4 py-12 sm:px-6 lg:px-8">
    
    <!-- Header -->
    <div class="text-center mb-8">
      {{#if logoUrl}}
      <img src="{{logoUrl}}" alt="{{businessName}}" class="h-16 mx-auto mb-4">
      {{else}}
      <div class="h-16 w-16 mx-auto mb-4 brand-bg rounded-full flex items-center justify-center">
        <span class="text-white text-2xl font-bold">{{businessInitial}}</span>
      </div>
      {{/if}}
      <h1 class="text-4xl font-bold text-gray-900 mb-2">{{businessName}}</h1>
      <p class="text-xl text-gray-600">SMS Notifications</p>
    </div>

    <!-- Main Card -->
    <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
      <div class="p-8 sm:p-12">
        
        <!-- Intro -->
        <div class="mb-8">
          <h2 class="text-2xl font-semibold text-gray-900 mb-4">Stay Connected</h2>
          <p class="text-gray-700 leading-relaxed">
            {{useCaseDescription}}
          </p>
        </div>

        <!-- Form -->
        <form id="optInForm" class="space-y-6">
          
          <!-- Phone Input -->
          <div>
            <label for="phone" class="block text-sm font-medium text-gray-700 mb-2">
              Mobile Phone Number
            </label>
            <input 
              type="tel" 
              id="phone" 
              name="phone" 
              required
              placeholder="(555) 123-4567"
              class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-{{brandColor}} focus:border-transparent transition-all text-lg"
            >
          </div>

          <!-- Consent Checkbox -->
          <div class="bg-blue-50 border-2 border-blue-200 rounded-lg p-6">
            <div class="flex items-start">
              <input 
                type="checkbox" 
                id="consent" 
                name="consent" 
                required
                class="mt-1 h-5 w-5 brand-accent rounded focus:ring-2 focus:ring-offset-2 focus:ring-{{brandColor}}"
              >
              <label for="consent" class="ml-3 text-sm text-gray-800 leading-relaxed">
                <strong class="font-semibold">I consent to receive SMS text messages</strong> from {{businessName}} 
                at the phone number provided above. I understand that:
                <ul class="mt-3 space-y-2 text-gray-700">
                  <li>• Message frequency: {{messageFrequency}}</li>
                  <li>• Message and data rates may apply</li>
                  <li>• Consent is not a condition of purchase</li>
                  <li>• Reply <strong>STOP</strong> to opt out at any time</li>
                  <li>• Reply <strong>HELP</strong> for assistance</li>
                </ul>
              </label>
            </div>
          </div>

          <!-- Submit Button -->
          <button 
            type="submit"
            class="w-full brand-bg text-white font-semibold py-4 px-6 rounded-lg hover:opacity-90 transform hover:scale-[1.02] transition-all shadow-lg text-lg"
          >
            Subscribe to SMS Notifications
          </button>

        </form>

        <!-- Legal Links -->
        <div class="mt-8 pt-8 border-t border-gray-200 text-center space-x-4">
          <a href="{{privacyPolicyUrl}}" class="text-sm brand-accent hover:underline font-medium">Privacy Policy</a>
          <span class="text-gray-300">|</span>
          <a href="{{termsUrl}}" class="text-sm brand-accent hover:underline font-medium">Terms of Service</a>
        </div>

      </div>

      <!-- Carrier Disclosure -->
      <div class="bg-gray-50 px-8 py-6 sm:px-12 border-t border-gray-200">
        <p class="text-xs text-gray-600 leading-relaxed">
          <strong class="font-semibold">Supported Carriers:</strong> AT&T, T-Mobile, Verizon, Sprint, Boost, Cricket, 
          Metro PCS, U.S. Cellular, Virgin Mobile, and other major carriers. Carrier message and data rates may apply.
        </p>
        <p class="text-xs text-gray-600 mt-3">
          For support, contact us at <a href="mailto:{{contactEmail}}" class="brand-accent hover:underline">{{contactEmail}}</a> 
          or call <a href="tel:{{contactPhone}}" class="brand-accent hover:underline">{{contactPhone}}</a>.
        </p>
      </div>
    </div>

    <!-- Footer -->
    <div class="text-center mt-8 text-sm text-gray-500">
      <p>&copy; {{currentYear}} {{businessName}}. All rights reserved.</p>
      <p class="mt-2">This service complies with TCPA and CTIA messaging guidelines.</p>
    </div>

  </div>

  <script>
    document.getElementById('optInForm').addEventListener('submit', function(e) {
      e.preventDefault();
      const phone = document.getElementById('phone').value;
      const consent = document.getElementById('consent').checked;
      
      if (!consent) {
        alert('Please check the consent box to continue.');
        return;
      }

      // TODO: Submit to backend API
      alert('Thank you for subscribing! You will receive a confirmation message shortly.');
      this.reset();
    });

    // Phone number formatting
    const phoneInput = document.getElementById('phone');
    phoneInput.addEventListener('input', function(e) {
      let value = e.target.value.replace(/\D/g, '');
      if (value.length > 10) value = value.slice(0, 10);
      
      if (value.length >= 6) {
        value = '(' + value.slice(0,3) + ') ' + value.slice(3,6) + '-' + value.slice(6);
      } else if (value.length >= 3) {
        value = '(' + value.slice(0,3) + ') ' + value.slice(3);
      }
      
      e.target.value = value;
    });
  </script>
</body>
</html>
