{% comment %}
  Tall Timbers Internet Signup Form
  Shopify Liquid Template
{% endcomment %}

<style>
/* Base Reset & Fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

.tt-signup-page {
  --coral: #C75B4B;
  --coral-light: #E07A6B;
  --amber: #F59E0B;
  --dark: #0A0A0A;
  --dark-card: rgba(26, 26, 26, 0.95);
  --white: #FFFFFF;
  --gray: #888888;
  --gray-light: #CCCCCC;
  --success: #4CAF50;
  --info: #3B82F6;
  
  font-family: 'Outfit', sans-serif;
  background: var(--dark);
  min-height: 100vh;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

.tt-signup-page *, 
.tt-signup-page *::before, 
.tt-signup-page *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Step Indicator */
.tt-step-indicator {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.tt-step-dot {
  height: 0.5rem;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.tt-step-dot.active {
  width: 2rem;
  background: var(--coral);
}

.tt-step-dot.completed {
  width: 0.5rem;
  background: var(--success);
}

.tt-step-dot.pending {
  width: 0.5rem;
  background: rgba(255,255,255,0.2);
}

/* Section Header */
.tt-section-header {
  text-align: center;
  margin-bottom: 2rem;
}

.tt-section-tag {
  color: var(--coral);
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 0.75rem;
}

.tt-section-title {
  color: var(--white);
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0;
}

.tt-section-subtitle {
  color: var(--gray);
  margin-top: 0.5rem;
}

/* Plans Grid */
.tt-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .tt-plans-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
  }
}

/* Plan Card */
.tt-plan-card {
  background: var(--dark-card);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 20px;
  padding: 1.5rem;
  position: relative;
  transition: all 0.4s ease;
  cursor: pointer;
}

.tt-plan-card:hover {
  transform: translateY(-5px);
  border-color: rgba(199, 91, 75, 0.3);
}

.tt-plan-card.featured {
  border-color: var(--coral);
  background: linear-gradient(135deg, rgba(26, 26, 26, 0.95), rgba(199, 91, 75, 0.1));
}

.tt-plan-card.great-value {
  border-color: var(--amber);
  background: linear-gradient(135deg, rgba(26, 26, 26, 0.95), rgba(245, 158, 11, 0.1));
}

.tt-plan-card.selected {
  box-shadow: 0 0 0 3px var(--coral);
}

.tt-plan-card.great-value.selected {
  box-shadow: 0 0 0 3px var(--amber);
}

/* Plan Badge */
.tt-plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  white-space: nowrap;
}

.tt-plan-badge.popular {
  background: var(--coral);
  color: var(--white);
}

.tt-plan-badge.great-value {
  background: var(--amber);
  color: var(--dark);
}

/* Plan Content */
.tt-plan-name {
  color: var(--white);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.tt-plan-speed {
  color: var(--coral);
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  margin-bottom: 1rem;
}

.tt-plan-price {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
  margin-bottom: 1.25rem;
}

.tt-plan-price-currency {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray);
}

.tt-plan-price-amount {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--white);
}

.tt-plan-price-period {
  font-size: 0.9rem;
  color: var(--gray);
}

/* Plan Features */
.tt-plan-features {
  list-style: none;
  margin-bottom: 1rem;
  padding: 0;
}

.tt-plan-features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  color: var(--gray-light);
  font-size: 0.8rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.tt-plan-features li:last-child {
  border-bottom: none;
}

.tt-plan-features li svg {
  width: 16px;
  height: 16px;
  color: var(--success);
  flex-shrink: 0;
}

/* Plan Total Box */
.tt-plan-total {
  background: rgba(42, 42, 42, 0.5);
  border-radius: 10px;
  padding: 0.875rem;
  margin-bottom: 1rem;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.tt-plan-total-row {
  display: flex;
  justify-content: space-between;
}

.tt-plan-total-label {
  color: var(--gray);
  font-size: 0.85rem;
}

.tt-plan-total-value {
  color: var(--white);
  font-weight: 600;
  font-size: 0.95rem;
}

/* Plan CTA Button */
.tt-plan-cta {
  display: block;
  width: 100%;
  padding: 0.75rem;
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  border: 2px solid var(--coral);
  background: transparent;
  color: var(--coral);
}

.tt-plan-cta:hover {
  background: var(--coral);
  color: var(--white);
}

.tt-plan-card.featured .tt-plan-cta {
  background: var(--coral);
  color: var(--white);
  border-color: var(--coral);
}

.tt-plan-card.featured .tt-plan-cta:hover {
  background: var(--coral-light);
}

.tt-plan-card.great-value .tt-plan-cta {
  border-color: var(--amber);
  color: var(--amber);
  background: transparent;
}

.tt-plan-card.great-value .tt-plan-cta:hover {
  background: var(--amber);
  color: var(--dark);
}

.tt-plan-cta.selected {
  background: var(--coral) !important;
  color: var(--white) !important;
}

.tt-plan-card.great-value .tt-plan-cta.selected {
  background: var(--amber) !important;
  color: var(--dark) !important;
}

/* Plans Note */
.tt-plans-note {
  text-align: center;
  color: var(--gray);
  font-size: 0.8rem;
  margin-top: 2rem;
}

/* Continue Button */
.tt-continue-container {
  text-align: center;
  margin-top: 2rem;
}

/* Form Card */
.tt-form-card {
  background: var(--dark-card);
  border-radius: 24px;
  padding: 2rem;
  border: 1px solid rgba(255,255,255,0.1);
  max-width: 600px;
  margin: 0 auto;
}

.tt-form-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.5rem;
}

.tt-form-subtitle {
  color: var(--gray);
  margin-bottom: 1.5rem;
}

/* Form Inputs */
.tt-form-group {
  margin-bottom: 1rem;
}

.tt-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 600px) {
  .tt-form-row {
    grid-template-columns: 1fr;
  }
}

.tt-form-label {
  display: block;
  color: var(--gray-light);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.tt-form-label-optional {
  color: var(--gray);
  font-weight: 400;
}

.tt-form-input,
.tt-form-select {
  width: 100%;
  padding: 0.875rem 1rem;
  background: rgba(42, 42, 42, 0.8);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: var(--white);
  font-size: 0.95rem;
  font-family: 'Outfit', sans-serif;
  outline: none;
  transition: border-color 0.3s ease;
}

.tt-form-input:focus,
.tt-form-select:focus {
  border-color: var(--coral);
}

.tt-form-input::placeholder {
  color: var(--gray);
}

.tt-form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.tt-form-select option {
  background: #1a1a1a;
  color: var(--white);
}

.tt-form-hint {
  font-size: 0.75rem;
  color: var(--gray);
  margin-top: 0.5rem;
}

/* Address Row */
.tt-address-row {
  display: flex;
  gap: 0.75rem;
}

.tt-unit-input {
  width: 100px;
  flex-shrink: 0;
  text-align: center;
}

/* Checkbox */
.tt-checkbox-container {
  margin-top: 1.5rem;
  padding: 1rem;
  background: rgba(42, 42, 42, 0.3);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.05);
}

.tt-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  color: var(--gray-light);
}

.tt-checkbox {
  width: 20px;
  height: 20px;
  accent-color: var(--coral);
  cursor: pointer;
  margin-top: 2px;
}

.tt-checkbox-text {
  font-weight: 500;
  color: var(--white);
}

.tt-checkbox-hint {
  font-size: 0.8rem;
  color: var(--gray);
  margin-top: 0.25rem;
}

/* Plan Summary Box */
.tt-plan-summary {
  margin-top: 1.5rem;
  background: rgba(42, 42, 42, 0.5);
  border-radius: 12px;
  padding: 1.25rem;
}

.tt-plan-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tt-plan-summary-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--white);
}

.tt-plan-summary-speed {
  color: var(--gray);
}

.tt-plan-summary-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--coral);
}

.tt-plan-summary-period {
  color: var(--gray);
  font-size: 0.875rem;
}

/* Buttons */
.tt-btn {
  padding: 1rem 2rem;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  font-size: 1rem;
  font-family: 'Outfit', sans-serif;
  transition: all 0.3s ease;
  border: none;
}

.tt-btn-primary {
  background: var(--coral);
  color: var(--white);
}

.tt-btn-primary:hover {
  background: var(--coral-light);
}

.tt-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tt-btn-secondary {
  background: transparent;
  color: var(--gray-light);
  border: 1px solid rgba(255,255,255,0.2);
}

.tt-btn-secondary:hover {
  border-color: rgba(255,255,255,0.4);
  color: var(--white);
}

.tt-btn-large {
  padding: 1rem 3rem;
  font-size: 1.1rem;
}

.tt-btn-row {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.tt-btn-row .tt-btn {
  flex: 1;
}

/* Router Options */
.tt-router-section h4 {
  font-weight: 600;
  color: var(--gray-light);
  margin-bottom: 1rem;
}

.tt-router-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tt-router-option {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  cursor: pointer;
  background: transparent;
  transition: all 0.3s ease;
}

.tt-router-option.selected {
  border-color: var(--coral);
  background: rgba(199, 91, 75, 0.1);
}

.tt-router-option input {
  position: absolute;
  opacity: 0;
}

.tt-router-option-title {
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.5rem;
}

.tt-router-option-price {
  font-size: 0.9rem;
  font-weight: 500;
}

.tt-router-option-price.free {
  color: var(--success);
}

.tt-router-option-price.paid {
  color: var(--coral);
}

.tt-router-option-desc {
  font-size: 0.85rem;
  color: var(--gray);
  margin-top: 0.25rem;
}

/* Pricing Summary */
.tt-pricing-summary {
  background: rgba(42, 42, 42, 0.5);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.tt-pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tt-pricing-label {
  font-size: 0.875rem;
  color: var(--gray);
}

.tt-pricing-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
}

.tt-pricing-value span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--gray);
}

.tt-pricing-detail {
  font-size: 0.875rem;
  color: var(--gray);
  margin-top: 0.25rem;
}

.tt-pricing-onetime {
  text-align: right;
}

.tt-pricing-onetime-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--amber);
}

.tt-pricing-divider {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 0.75rem;
  margin-top: 0.75rem;
}

.tt-pricing-total {
  display: flex;
  justify-content: space-between;
}

.tt-pricing-total-label {
  color: var(--gray-light);
  font-weight: 600;
}

.tt-pricing-total-value {
  color: var(--amber);
  font-weight: 700;
  font-size: 1.1rem;
}

/* Info Summary Boxes */
.tt-info-box {
  background: rgba(42, 42, 42, 0.5);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.tt-info-box-title {
  font-weight: 600;
  color: var(--white);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tt-info-box-title svg {
  width: 18px;
  height: 18px;
  color: var(--coral);
}

.tt-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  font-size: 0.9rem;
}

.tt-info-grid-full {
  grid-column: span 2;
}

.tt-info-label {
  color: var(--gray);
}

.tt-info-value {
  color: var(--white);
}

/* Disclaimer */
.tt-disclaimer {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.tt-disclaimer-content {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.tt-disclaimer-icon {
  width: 20px;
  height: 20px;
  color: var(--info);
  flex-shrink: 0;
  margin-top: 2px;
}

.tt-disclaimer-title {
  color: #93C5FD;
  font-size: 0.85rem;
  font-weight: 500;
  margin: 0;
}

.tt-disclaimer-text {
  color: #64748B;
  font-size: 0.8rem;
  margin: 0.25rem 0 0 0;
}

/* Success Popup */
.tt-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
}

.tt-popup {
  background: rgba(26, 26, 26, 0.98);
  border-radius: 24px;
  padding: 2.5rem;
  max-width: 450px;
  width: 100%;
  border: 1px solid rgba(76, 175, 80, 0.3);
  text-align: center;
  animation: ttPopIn 0.3s ease-out;
}

@keyframes ttPopIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.tt-popup-icon {
  width: 5rem;
  height: 5rem;
  background: var(--success);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}

.tt-popup-icon svg {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--white);
}

.tt-popup-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--success);
  margin-bottom: 0.75rem;
}

.tt-popup-message {
  color: #81C784;
  font-size: 1rem;
  margin-bottom: 1rem;
}

.tt-popup-email {
  color: var(--gray-light);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.tt-popup-email strong {
  color: var(--success);
}

.tt-popup-summary {
  background: rgba(76, 175, 80, 0.1);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.tt-popup-plan {
  color: var(--white);
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}

.tt-popup-address {
  color: var(--gray);
  font-size: 0.85rem;
  margin: 0;
}

.tt-popup-note {
  color: var(--gray);
  font-size: 0.8rem;
  margin-bottom: 1.5rem;
}

/* PM Info Box */
.tt-info-note {
  margin-top: 1.5rem;
  padding: 1rem;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 12px;
}

.tt-info-note p {
  color: #93C5FD;
  font-size: 0.85rem;
  margin: 0;
}

/* Utility */
.tt-hidden {
  display: none !important;
}

.tt-text-center {
  text-align: center;
}
</style>

<!-- Signup Form Container -->
<div class="tt-signup-page">
  <div id="tt-signup-root"></div>
</div>

<!-- React and Babel -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel">
function TallTimbersSignup() {
  const [step, setStep] = React.useState(1);
  const [selectedPlan, setSelectedPlan] = React.useState(null);
  const [hoveredPlan, setHoveredPlan] = React.useState(null);
  const [showSuccessPopup, setShowSuccessPopup] = React.useState(false);
  const [isSubmitting, setIsSubmitting] = React.useState(false);
  const [formData, setFormData] = React.useState({
    fullName: '',
    unitNumber: '',
    street: '',
    email: '',
    phone: '',
    moveInDate: '',
    doorCode: '',
    hasPropertyManager: false,
    pmName: '',
    pmEmail: '',
    pmPhone: '',
    wantsRouter: false
  });

  const streets = [
    "Tall Timbers Way",
    "Campfire Pass",
    "Ravine Roadway",
    "Campfire Bend",
    "Short Creek Trail",
    "Back Woods Loop",
    "Pig Trail",
    "Ledgerock Bypass",
    "High Tower Road",
    "Meadow Song Way",
    "Mark Twain Drive",
    "Hillside Pass"
  ];

  const plans = [
    {
      id: "bronze",
      name: "Bronze",
      speed: 100,
      speedDisplay: "100 Mbps",
      price: 89.95,
      priceWhole: "89",
      priceDecimal: ".95/mo",
      routerPrice: 55,
      features: ["100 Mbps Download", "100 Mbps Upload", "Unlimited Data", "VIP Support", "Professional Install"],
      badge: null,
      cardClass: "default"
    },
    {
      id: "silver",
      name: "Silver",
      speed: 300,
      speedDisplay: "300 Mbps",
      price: 104.95,
      priceWhole: "104",
      priceDecimal: ".95/mo",
      routerPrice: 55,
      features: ["300 Mbps Download", "300 Mbps Upload", "Unlimited Data", "VIP Support", "Professional Install"],
      badge: "GREAT VALUE",
      cardClass: "great-value"
    },
    {
      id: "gold",
      name: "Gold",
      speed: 1000,
      speedDisplay: "1 Gbps",
      price: 114.95,
      priceWhole: "114",
      priceDecimal: ".95/mo",
      routerPrice: 78,
      features: ["1 Gbps Download", "1 Gbps Upload", "Unlimited Data", "VIP Support", "Professional Install"],
      badge: "POPULAR",
      cardClass: "featured"
    }
  ];

  const selected = plans.find(p => p.id === selectedPlan);

  // Google Form Configuration - UPDATE THESE WITH YOUR FORM IDs
  const GOOGLE_FORM_URL = 'https://docs.google.com/forms/d/e/YOUR_FORM_ID_HERE/formResponse';
  const FORM_FIELDS = {
    status: 'entry.XXXXXXXX',
    fullName: 'entry.XXXXXXXX',
    address: 'entry.XXXXXXXX',
    email: 'entry.XXXXXXXX',
    phone: 'entry.XXXXXXXX',
    moveInDate: 'entry.XXXXXXXX',
    doorCode: 'entry.XXXXXXXX',
    plan: 'entry.XXXXXXXX',
    routerInfo: 'entry.XXXXXXXX',
    pmName: 'entry.XXXXXXXX',
    pmEmail: 'entry.XXXXXXXX',
    pmPhone: 'entry.XXXXXXXX'
  };

  const handleInputChange = (e) => {
    const { name, value, type, checked } = e.target;
    
    if (type === 'checkbox') {
      setFormData(prev => ({ ...prev, [name]: checked }));
      return;
    }
    
    if (name === 'unitNumber') {
      const numericValue = value.replace(/\D/g, '').slice(0, 4);
      setFormData(prev => ({ ...prev, [name]: numericValue }));
      return;
    }
    
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const getFullAddress = () => {
    if (formData.unitNumber && formData.street) {
      return `${formData.unitNumber} ${formData.street}`;
    }
    return '';
  };

  const isFormValid = () => {
    return formData.fullName && formData.unitNumber && formData.street && formData.email && formData.phone && formData.moveInDate;
  };

  const isPMFormValid = () => {
    return formData.pmName && formData.pmEmail && formData.pmPhone;
  };

  const handleContinueFromStep2 = () => {
    if (formData.hasPropertyManager) {
      setStep(3);
    } else {
      setStep(4);
    }
  };

  const handleBackFromRouterStep = () => {
    if (formData.hasPropertyManager) {
      setStep(3);
    } else {
      setStep(2);
    }
  };

  const submitToGoogleForm = () => {
    const planInfo = `${selected.name} - ${selected.speedDisplay} - $${selected.price.toFixed(2)}/mo`;
    const routerInfo = formData.wantsRouter ? `Purchase ($${selected.routerPrice.toFixed(2)})` : 'BYOD';
    
    const formBody = new URLSearchParams();
    formBody.append(FORM_FIELDS.status, 'NEW');
    formBody.append(FORM_FIELDS.fullName, formData.fullName);
    formBody.append(FORM_FIELDS.address, getFullAddress());
    formBody.append(FORM_FIELDS.email, formData.email);
    formBody.append(FORM_FIELDS.phone, formData.phone);
    formBody.append(FORM_FIELDS.moveInDate, formData.moveInDate);
    formBody.append(FORM_FIELDS.doorCode, formData.doorCode || '');
    formBody.append(FORM_FIELDS.plan, planInfo);
    formBody.append(FORM_FIELDS.routerInfo, routerInfo);
    
    if (formData.hasPropertyManager) {
      formBody.append(FORM_FIELDS.pmName, formData.pmName);
      formBody.append(FORM_FIELDS.pmEmail, formData.pmEmail);
      formBody.append(FORM_FIELDS.pmPhone, formData.pmPhone);
    }

    // Create hidden iframe for submission
    const iframe = document.createElement('iframe');
    iframe.name = 'hidden_iframe';
    iframe.style.display = 'none';
    document.body.appendChild(iframe);

    const form = document.createElement('form');
    form.method = 'POST';
    form.action = GOOGLE_FORM_URL;
    form.target = 'hidden_iframe';

    for (const [key, value] of formBody.entries()) {
      const input = document.createElement('input');
      input.type = 'hidden';
      input.name = key;
      input.value = value;
      form.appendChild(input);
    }

    document.body.appendChild(form);
    form.submit();

    // Cleanup
    setTimeout(() => {
      document.body.removeChild(form);
      document.body.removeChild(iframe);
    }, 2000);
  };

  const handleSubmitForm = () => {
    setIsSubmitting(true);
    
    // Submit to Google Form
    submitToGoogleForm();
    
    // Show success popup after short delay
    setTimeout(() => {
      setIsSubmitting(false);
      setShowSuccessPopup(true);
    }, 1500);
  };

  const closePopupAndReset = () => {
    setShowSuccessPopup(false);
    setStep(1);
    setSelectedPlan(null);
    setFormData({
      fullName: '',
      unitNumber: '',
      street: '',
      email: '',
      phone: '',
      moveInDate: '',
      doorCode: '',
      hasPropertyManager: false,
      pmName: '',
      pmEmail: '',
      pmPhone: '',
      wantsRouter: false
    });
  };

  // Check Icon SVG
  const CheckIcon = () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <polyline points="20 6 9 17 4 12"></polyline>
    </svg>
  );

  // Step Indicator
  const StepIndicator = ({ currentStep }) => {
    const totalSteps = formData.hasPropertyManager ? 5 : 4;
    const displayStep = formData.hasPropertyManager ? currentStep : (currentStep > 2 ? currentStep - 1 : currentStep);
    
    return (
      <div className="tt-step-indicator">
        {Array.from({ length: totalSteps }, (_, i) => i + 1).map(s => (
          <div
            key={s}
            className={`tt-step-dot ${s === displayStep ? 'active' : s < displayStep ? 'completed' : 'pending'}`}
          />
        ))}
      </div>
    );
  };

  // Success Popup
  const SuccessPopup = () => (
    <div className="tt-popup-overlay">
      <div className="tt-popup">
        <div className="tt-popup-icon">
          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
          </svg>
        </div>
        <h3 className="tt-popup-title">Form Submitted!</h3>
        <p className="tt-popup-message">Thank you for signing up for Tall Timbers Internet Service.</p>
        <p className="tt-popup-email">A confirmation email has been sent to:<br /><strong>{formData.email}</strong></p>
        <div className="tt-popup-summary">
          <p className="tt-popup-plan">{selected?.name} Plan • {selected?.speedDisplay}</p>
          <p className="tt-popup-address">{getFullAddress()}</p>
        </div>
        <p className="tt-popup-note">Our team will contact you shortly to schedule your installation.</p>
        <button onClick={closePopupAndReset} className="tt-btn tt-btn-primary" style={{ width: '100%' }}>
          Close
        </button>
      </div>
    </div>
  );

  // STEP 1: Plan Selection
  if (step === 1) {
    return (
      <div>
        <StepIndicator currentStep={1} />
        
        <div className="tt-section-header">
          <span className="tt-section-tag">// STEP 1: CHOOSE YOUR SPEED</span>
          <h2 className="tt-section-title">Select Your Plan</h2>
          <p className="tt-section-subtitle">Choose the internet speed that fits your needs</p>
        </div>

        <div className="tt-plans-grid">
          {plans.map((plan) => (
            <div
              key={plan.id}
              className={`tt-plan-card ${plan.cardClass} ${selectedPlan === plan.id ? 'selected' : ''}`}
              onClick={() => setSelectedPlan(plan.id)}
              onMouseEnter={() => setHoveredPlan(plan.id)}
              onMouseLeave={() => setHoveredPlan(null)}
            >
              {plan.badge && (
                <div className={`tt-plan-badge ${plan.cardClass === 'featured' ? 'popular' : 'great-value'}`}>
                  {plan.badge}
                </div>
              )}
              <h3 className="tt-plan-name" style={{ marginTop: plan.badge ? '0.5rem' : 0 }}>{plan.name}</h3>
              <p className="tt-plan-speed">{plan.speedDisplay}</p>
              <div className="tt-plan-price">
                <span className="tt-plan-price-currency">$</span>
                <span className="tt-plan-price-amount">{plan.priceWhole}</span>
                <span className="tt-plan-price-period">{plan.priceDecimal}</span>
              </div>
              <ul className="tt-plan-features">
                {plan.features.map((feature, idx) => (
                  <li key={idx}>
                    <CheckIcon />
                    {feature}
                  </li>
                ))}
              </ul>
              <div className="tt-plan-total">
                <div className="tt-plan-total-row">
                  <span className="tt-plan-total-label">Monthly Total:</span>
                  <span className="tt-plan-total-value">${plan.price.toFixed(2)}</span>
                </div>
              </div>
              <button className={`tt-plan-cta ${selectedPlan === plan.id ? 'selected' : ''}`}>
                {selectedPlan === plan.id ? '✓ Selected' : 'Select Plan'}
              </button>
            </div>
          ))}
        </div>

        <p className="tt-plans-note">All plans include unlimited data • No hidden fees • 30-day money-back guarantee</p>

        {selectedPlan && (
          <div className="tt-continue-container">
            <button onClick={() => setStep(2)} className="tt-btn tt-btn-primary tt-btn-large">
              Continue to Customer Info →
            </button>
          </div>
        )}
      </div>
    );
  }

  // STEP 2: Customer Information
  if (step === 2) {
    return (
      <div>
        <StepIndicator currentStep={2} />
        
        <div className="tt-form-card">
          <h2 className="tt-form-title">Customer Information</h2>
          <p className="tt-form-subtitle">Tell us about yourself</p>

          <div className="tt-form-group">
            <label className="tt-form-label">Full Name *</label>
            <input 
              type="text" 
              name="fullName" 
              value={formData.fullName} 
              onChange={handleInputChange} 
              className="tt-form-input" 
              placeholder="John Smith" 
            />
          </div>

          <div className="tt-form-group">
            <label className="tt-form-label">Address *</label>
            <div className="tt-address-row">
              <input 
                type="text" 
                name="unitNumber" 
                value={formData.unitNumber} 
                onChange={handleInputChange} 
                className="tt-form-input tt-unit-input" 
                placeholder="Unit #" 
                maxLength={4}
              />
              <select 
                name="street" 
                value={formData.street} 
                onChange={handleInputChange} 
                className="tt-form-select"
              >
                <option value="">Select Street...</option>
                {streets.map((street, idx) => (
                  <option key={idx} value={street}>{street}</option>
                ))}
              </select>
            </div>
          </div>

          <div className="tt-form-row">
            <div className="tt-form-group">
              <label className="tt-form-label">Email Address *</label>
              <input 
                type="email" 
                name="email" 
                value={formData.email} 
                onChange={handleInputChange} 
                className="tt-form-input" 
                placeholder="your@email.com" 
              />
            </div>
            <div className="tt-form-group">
              <label className="tt-form-label">Phone Number *</label>
              <input 
                type="tel" 
                name="phone" 
                value={formData.phone} 
                onChange={handleInputChange} 
                className="tt-form-input" 
                placeholder="(555) 123-4567" 
              />
            </div>
          </div>

          <div className="tt-form-row">
            <div className="tt-form-group">
              <label className="tt-form-label">Move-in Date *</label>
              <input 
                type="date" 
                name="moveInDate" 
                value={formData.moveInDate} 
                onChange={handleInputChange} 
                className="tt-form-input" 
              />
            </div>
            <div className="tt-form-group">
              <label className="tt-form-label">Door Code <span className="tt-form-label-optional">(Optional)</span></label>
              <input 
                type="text" 
                name="doorCode" 
                value={formData.doorCode} 
                onChange={handleInputChange} 
                className="tt-form-input" 
                placeholder="e.g. 1234" 
              />
              <p className="tt-form-hint">Providing your door code helps us complete your installation faster.</p>
            </div>
          </div>

          <div className="tt-checkbox-container">
            <label className="tt-checkbox-label">
              <input 
                type="checkbox" 
                name="hasPropertyManager"
                checked={formData.hasPropertyManager}
                onChange={handleInputChange}
                className="tt-checkbox"
              />
              <div>
                <span className="tt-checkbox-text">I have a property manager</span>
                <p className="tt-checkbox-hint">Optional - Check this if you'd like us to contact your property manager</p>
              </div>
            </label>
          </div>

          <div className="tt-plan-summary">
            <div className="tt-plan-summary-row">
              <div>
                <div className="tt-plan-summary-name">{selected?.name} Plan</div>
                <div className="tt-plan-summary-speed">{selected?.speedDisplay}</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div className="tt-plan-summary-price">${selected?.price.toFixed(2)}</div>
                <div className="tt-plan-summary-period">/month</div>
              </div>
            </div>
          </div>

          <div className="tt-btn-row">
            <button onClick={() => setStep(1)} className="tt-btn tt-btn-secondary">← Back</button>
            <button 
              onClick={handleContinueFromStep2} 
              disabled={!isFormValid()} 
              className="tt-btn tt-btn-primary"
            >
              Continue →
            </button>
          </div>
        </div>
      </div>
    );
  }

  // STEP 3: Property Manager Information
  if (step === 3 && formData.hasPropertyManager) {
    return (
      <div>
        <StepIndicator currentStep={3} />
        
        <div className="tt-form-card">
          <h2 className="tt-form-title">Property Manager Information</h2>
          <p className="tt-form-subtitle">Provide your property manager's contact details</p>

          <div className="tt-form-group">
            <label className="tt-form-label">Property Manager Name *</label>
            <input 
              type="text" 
              name="pmName" 
              value={formData.pmName} 
              onChange={handleInputChange} 
              className="tt-form-input" 
              placeholder="Jane Doe" 
            />
          </div>

          <div className="tt-form-group">
            <label className="tt-form-label">Property Manager Email *</label>
            <input 
              type="email" 
              name="pmEmail" 
              value={formData.pmEmail} 
              onChange={handleInputChange} 
              className="tt-form-input" 
              placeholder="manager@property.com" 
            />
          </div>

          <div className="tt-form-group">
            <label className="tt-form-label">Property Manager Phone *</label>
            <input 
              type="tel" 
              name="pmPhone" 
              value={formData.pmPhone} 
              onChange={handleInputChange} 
              className="tt-form-input" 
              placeholder="(555) 987-6543" 
            />
          </div>

          <div className="tt-info-note">
            <p><strong>Why we ask:</strong> We may contact your property manager to coordinate installation access or verify property details.</p>
          </div>

          <div className="tt-btn-row">
            <button onClick={() => setStep(2)} className="tt-btn tt-btn-secondary">← Back</button>
            <button 
              onClick={() => setStep(4)} 
              disabled={!isPMFormValid()} 
              className="tt-btn tt-btn-primary"
            >
              Continue →
            </button>
          </div>
        </div>
      </div>
    );
  }

  // STEP 4: Router Options
  if (step === 4) {
    return (
      <div>
        <StepIndicator currentStep={formData.hasPropertyManager ? 4 : 3} />
        
        <div className="tt-form-card">
          <h2 className="tt-form-title">Service Options</h2>
          <p className="tt-form-subtitle">Choose your router option</p>

          <div className="tt-router-section">
            <h4>Router Option</h4>
            <div className="tt-router-options">
              <label 
                className={`tt-router-option ${!formData.wantsRouter ? 'selected' : ''}`}
                onClick={() => setFormData(prev => ({ ...prev, wantsRouter: false }))}
              >
                <input type="radio" name="wantsRouter" checked={!formData.wantsRouter} onChange={() => {}} />
                <span className="tt-router-option-title">Bring Your Own Device</span>
                <span className="tt-router-option-price free">No charge</span>
                <span className="tt-router-option-desc">Use your own compatible router</span>
              </label>

              <label 
                className={`tt-router-option ${formData.wantsRouter ? 'selected' : ''}`}
                onClick={() => setFormData(prev => ({ ...prev, wantsRouter: true }))}
              >
                <input type="radio" name="wantsRouter" checked={formData.wantsRouter} onChange={() => {}} />
                <span className="tt-router-option-title">Purchase Router</span>
                <span className="tt-router-option-price paid">${selected?.routerPrice.toFixed(2)} one-time</span>
                <span className="tt-router-option-desc">High-performance Wi-Fi router optimized for your plan</span>
              </label>
            </div>
          </div>

          <div className="tt-pricing-summary" style={{ marginTop: '1.5rem' }}>
            <div className="tt-pricing-row">
              <div>
                <div className="tt-pricing-label">Monthly Total</div>
                <div className="tt-pricing-value">${selected?.price.toFixed(2)}<span>/mo</span></div>
                <div className="tt-pricing-detail">{selected?.name} plan ({selected?.speedDisplay})</div>
              </div>
              {formData.wantsRouter && (
                <div className="tt-pricing-onetime">
                  <div className="tt-pricing-label">Router (One-Time)</div>
                  <div className="tt-pricing-onetime-value">${selected?.routerPrice.toFixed(2)}</div>
                </div>
              )}
            </div>
            <div className="tt-pricing-divider">
              <div className="tt-pricing-total">
                <span className="tt-pricing-total-label">First Month Total:</span>
                <span className="tt-pricing-total-value">
                  ${(selected?.price + (formData.wantsRouter ? selected?.routerPrice : 0)).toFixed(2)}
                </span>
              </div>
            </div>
          </div>

          <div className="tt-btn-row">
            <button onClick={handleBackFromRouterStep} className="tt-btn tt-btn-secondary">← Back</button>
            <button onClick={() => setStep(5)} className="tt-btn tt-btn-primary">Review Details →</button>
          </div>
        </div>
      </div>
    );
  }

  // STEP 5: Service Confirmation
  if (step === 5) {
    return (
      <div>
        {showSuccessPopup && <SuccessPopup />}
        
        <StepIndicator currentStep={formData.hasPropertyManager ? 5 : 4} />
        
        <div className="tt-form-card">
          <h2 className="tt-form-title">Service Confirmation</h2>
          <p className="tt-form-subtitle">Please confirm your information</p>

          <div className="tt-info-box">
            <h4 className="tt-info-box-title">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
              Customer Information
            </h4>
            <div className="tt-info-grid">
              <div><span className="tt-info-label">Name:</span> <span className="tt-info-value">{formData.fullName}</span></div>
              <div><span className="tt-info-label">Email:</span> <span className="tt-info-value">{formData.email}</span></div>
              <div><span className="tt-info-label">Phone:</span> <span className="tt-info-value">{formData.phone}</span></div>
              <div><span className="tt-info-label">Move-in:</span> <span className="tt-info-value">{formData.moveInDate}</span></div>
              <div className="tt-info-grid-full"><span className="tt-info-label">Address:</span> <span className="tt-info-value">{getFullAddress()}</span></div>
              {formData.doorCode && <div className="tt-info-grid-full"><span className="tt-info-label">Door Code:</span> <span className="tt-info-value">{formData.doorCode}</span></div>}
            </div>
          </div>

          {formData.hasPropertyManager && (
            <div className="tt-info-box">
              <h4 className="tt-info-box-title">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="23" y1="11" x2="17" y2="11"></line></svg>
                Property Manager
              </h4>
              <div className="tt-info-grid">
                <div><span className="tt-info-label">Name:</span> <span className="tt-info-value">{formData.pmName}</span></div>
                <div><span className="tt-info-label">Email:</span> <span className="tt-info-value">{formData.pmEmail}</span></div>
                <div className="tt-info-grid-full"><span className="tt-info-label">Phone:</span> <span className="tt-info-value">{formData.pmPhone}</span></div>
              </div>
            </div>
          )}

          <div className="tt-info-box">
            <h4 className="tt-info-box-title">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"></path></svg>
              Plan Details
            </h4>
            <div style={{ fontSize: '0.9rem' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
                <span className="tt-info-label">{selected?.name} Plan ({selected?.speedDisplay})</span>
                <span className="tt-info-value">${selected?.price.toFixed(2)}/mo</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <span className="tt-info-label">Router</span>
                <span className="tt-info-value">{formData.wantsRouter ? `Purchase ($${selected?.routerPrice.toFixed(2)})` : 'BYOD (No charge)'}</span>
              </div>
              <div style={{ marginTop: '1rem', paddingTop: '1rem', borderTop: '1px solid rgba(255,255,255,0.1)' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontWeight: '700', marginBottom: '0.5rem' }}>
                  <span style={{ color: '#FFFFFF' }}>Monthly Total</span>
                  <span style={{ color: '#C75B4B' }}>${selected?.price.toFixed(2)}/mo</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontWeight: '700' }}>
                  <span style={{ color: '#FFFFFF' }}>First Month Total</span>
                  <span style={{ color: '#F59E0B' }}>${(selected?.price + (formData.wantsRouter ? selected?.routerPrice : 0)).toFixed(2)}</span>
                </div>
              </div>
            </div>
          </div>

          <div className="tt-disclaimer">
            <div className="tt-disclaimer-content">
              <svg className="tt-disclaimer-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <circle cx="12" cy="12" r="10"></circle>
                <line x1="12" y1="16" x2="12" y2="12"></line>
                <line x1="12" y1="8" x2="12.01" y2="8"></line>
              </svg>
              <div>
                <p className="tt-disclaimer-title">No payment required now</p>
                <p className="tt-disclaimer-text">This form is for service signup only. Payment information will be collected separately after your installation is scheduled. You will not be charged by submitting this form.</p>
              </div>
            </div>
          </div>

          <div className="tt-btn-row">
            <button onClick={() => setStep(4)} className="tt-btn tt-btn-secondary">← Back</button>
            <button 
              onClick={handleSubmitForm} 
              disabled={isSubmitting}
              className="tt-btn tt-btn-primary"
              style={{ opacity: isSubmitting ? 0.7 : 1 }}
            >
              {isSubmitting ? 'Submitting...' : 'Submit Form ✓'}
            </button>
          </div>
        </div>
      </div>
    );
  }

  return null;
}

// Render the app
const root = ReactDOM.createRoot(document.getElementById('tt-signup-root'));
root.render(<TallTimbersSignup />);
</script>