// Press, Final CTA, Footer

// --- WHATSAPP CTA (replaces press strip) ---
const WhatsAppCTA = () => {
  const wa = "https://wa.me/50685096767?text=" + encodeURIComponent("Hola Summer Home CR — me gustaría hablar sobre mi casa en Guanacaste.");
  return (
    <Section bg="offwhite" className="py-24 md:py-32 border-y hr-ink" label="10 WhatsApp">
      <Container>
        <div className="max-w-[60ch] mx-auto text-center">
          <Reveal>
            <div className="kicker text-sage mb-7 flex items-center gap-3 justify-center">
              <span className="h-px w-8 bg-sage/70" />
              <T en="Let's talk" es="Conversemos" />
              <span className="h-px w-8 bg-sage/70" />
            </div>
          </Reveal>
          <Reveal delay={70}>
            <h2 className="h-serif text-4xl md:text-5xl lg:text-[58px] text-green leading-[1.05]" data-comment-anchor="whatsapp-headline">
              <T
                en={<>We care for your home <em className="accent-terra">as if it were our own.</em></>}
                es={<>Cuidamos su casa <em className="accent-terra">como si fuera nuestra.</em></>} />
              
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p className="mt-7 text-ink/75 leading-[1.8] text-[17px] md:text-[18px] max-w-[46ch] mx-auto">
              <T
                en="Behind every property is a family's investment and the home they dream of returning to. Send us a message — let's talk about yours, in English or Spanish, today."
                es="Detrás de cada propiedad hay la inversión de una familia y la casa a la que sueñan volver. Escríbanos — hablemos de la suya, en inglés o español, hoy mismo." />
              
            </p>
          </Reveal>
          <Reveal delay={210}>
            <div className="mt-10 flex flex-col items-center gap-4">
              <a href={wa} target="_blank" rel="noopener noreferrer" className="btn btn-primary text-[15px] px-7 py-4">
                <IcWhatsApp className="h-5 w-5" />
                <T en="Message us on WhatsApp" es="Escríbanos por WhatsApp" />
              </a>
              <div className="kicker text-ink/45">+506 8509 6767 · <T en="Replies within hours" es="Respondemos en horas" /></div>
            </div>
          </Reveal>
        </div>
      </Container>
    </Section>);

};

// --- FINAL CTA ---
const FinalCTA = () => {
  return (
    <Section id="contact" bg="green" label="11 Contact" className="relative py-24 md:py-32 overflow-hidden">
      {/* faint stripe overlay */}
      <div aria-hidden="true" className="absolute inset-0 opacity-[0.06]"
      style={{ backgroundImage: 'repeating-linear-gradient(135deg, #FBFAF6 0 1px, transparent 1px 18px)' }} />
      <Container className="relative">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-14 lg:gap-20 items-start">
          <div className="lg:col-span-5">
            <Reveal>
              <div className="kicker text-mustard mb-6 flex items-center gap-3">
                <span className="h-px w-8 bg-mustard/70" />
                <T en="Contact" es="Contacto" />
              </div>
            </Reveal>
            <Reveal delay={60}>
              <h2 className="h-serif text-4xl md:text-5xl lg:text-[64px] text-offwhite" data-comment-anchor="cta-headline">
                <T
                  en={<>Ready to list <em className="accent-mustard">your home?</em></>}
                  es={<>¿Listo para confiarnos <em className="accent-mustard">su propiedad?</em></>} />
                
              </h2>
            </Reveal>
            <Reveal delay={140}>
              <p className="mt-7 text-offwhite/80 leading-[1.8] max-w-[42ch]">
                <T
                  en="Tell us about your property and we’ll schedule a visit for a complimentary Home Health & Safety Check. We’ll inspect A/C systems, pool chemistry, and structural security, then provide a detailed, no‑cost report and a written proposal within five business days."
                  es="Cuéntenos sobre su propiedad y coordinaremos una visita para un Chequeo de Salud y Seguridad del Hogar sin costo. Inspeccionaremos los aires acondicionados, la química de la piscina y la seguridad estructural, y le entregaremos un informe detallado y una propuesta escrita en un plazo de cinco días hábiles." />
                
              </p>
            </Reveal>
            <Reveal delay={200}>
              <div className="mt-10 space-y-4 text-offwhite/75 text-[14.5px]">
                <div className="flex items-center gap-3"><IcMapPin className="h-4 w-4 text-mustard" /> Golden Coast, Guanacaste</div>
                <div className="flex items-center gap-3"><IcWhatsApp className="h-4 w-4 text-mustard" /> WhatsApp +506 8509 6767</div>
                <div className="flex items-center gap-3"><IcArrowUpRight className="h-4 w-4 text-mustard" /> sianny@summerhomecr.com</div>
              </div>
            </Reveal>
          </div>

          <Reveal delay={120} className="lg:col-span-7">
            <ContactForm />
          </Reveal>
        </div>
      </Container>
    </Section>);

};

const ContactForm = () => {
  const { lang } = useLang();
  const [sent, setSent] = React.useState(false);
  const L = (en, es) => lang === 'es' ? es : en;
  const buildText = (form) => {
    const fd = new FormData(form);
    const lines = [
      `${L('Name', 'Nombre')}: ${fd.get('name')}`,
      `${L('Email', 'Correo')}: ${fd.get('email')}`,
      `${L('Service', 'Servicio')}: ${fd.get('service')}`,
      `${L('Property address', 'Dirección')}: ${fd.get('address')}`];

    const msg = (fd.get('message') || '').trim();
    if (msg) lines.push(`${L('Message', 'Mensaje')}: ${msg}`);
    return L('Hello Summer Home CR — contact request', 'Hola Summer Home CR — solicitud de contacto') + '\n\n' + lines.join('\n');
  };
  const onSubmit = (e) => {
    e.preventDefault();
    const text = buildText(e.target);
    window.open("https://wa.me/50685096767?text=" + encodeURIComponent(text), "_blank", "noopener");
    setSent(true);
  };
  const onEmail = (e) => {
    const form = e.currentTarget.form;
    if (!form.reportValidity()) return; // honor required fields before mailto
    const subject = L('Contact request — Summer Home CR', 'Solicitud de contacto — Summer Home CR');
    window.location.href = "mailto:sianny@summerhomecr.com?subject=" + encodeURIComponent(subject) + "&body=" + encodeURIComponent(buildText(form));
    setSent(true);
  };

  if (sent) {
    return (
      <div className="border hr-light p-10 md:p-14 bg-offwhite/[0.04]">
        <div className="h-serif text-3xl md:text-4xl text-offwhite">
          <T en={<>Thank you. <em className="accent-mustard">We'll be in touch.</em></>} es={<>Gracias. <em className="accent-mustard">Pronto le contactamos.</em></>} />
        </div>
        <p className="mt-4 text-offwhite/70 max-w-[44ch]">
          <T en="A member of the Tamarindo team will reply within 24 hours." es="Un miembro del equipo en Tamarindo responderá en 24 horas." />
        </p>
      </div>);

  }

  return (
    <form onSubmit={onSubmit} className="border hr-light p-7 md:p-10 bg-offwhite/[0.03]">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-2">
        <Field name="name" en="Your name" es="Su nombre" required />
        <Field name="email" en="Email" es="Correo" type="email" required />
        <Field name="service" en="Service needed" es="Servicio requerido" required className="md:col-span-2"
          options={[
            { en: 'Property Management', es: 'Administración de propiedades' },
            { en: 'Vacation Rentals', es: 'Alquileres vacacionales' },
            { en: 'SOS Services', es: 'Servicios SOS' },
            { en: 'Other', es: 'Otro' }]} />
        <Field name="address" en="Property address" es="Dirección de la propiedad" required className="md:col-span-2" />
        <Field name="message" en="Optional message" es="Mensaje (opcional)" textarea className="md:col-span-2" />
      </div>
      <div className="mt-8 flex flex-col sm:flex-row sm:items-center gap-4">
        <button type="submit" className="btn btn-primary self-start">
          <IcWhatsApp className="h-4 w-4" /> <T en="Send via WhatsApp" es="Enviar por WhatsApp" />
        </button>
        <button type="button" onClick={onEmail} className="btn btn-outline btn-outline-light self-start">
          <IcArrowUpRight className="h-4 w-4" /> <T en="Send via email" es="Enviar por correo" />
        </button>
      </div>
    </form>);

};

const Field = ({ name, en, es, type = "text", textarea = false, required = false, className = "", options = null }) => {
  const { lang } = useLang();
  const label = lang === 'es' ? es : en;
  return (
    <label className={"block py-2 " + className}>
      <span className="kicker text-mustard/85 block mb-1">{label}{required && <span className="text-terracotta ml-1">*</span>}</span>
      {options ?
      <select name={name} required={required} defaultValue="" className="field-dark">
          <option value="" disabled>{lang === 'es' ? 'Seleccione…' : 'Select…'}</option>
          {options.map((o, i) => <option key={i} value={lang === 'es' ? o.es : o.en}>{lang === 'es' ? o.es : o.en}</option>)}
        </select> :
      textarea ?
      <textarea name={name} rows={3} className="field-dark resize-none" placeholder={lang === 'es' ? 'Cuéntenos sobre la propiedad…' : 'Tell us about the property…'} /> :
      <input type={type} name={name} className="field-dark" required={required} />
      }
    </label>);

};

// --- FOOTER ---
const Footer = () => {
  const { lang, setLang } = useLang();
  return (
    <footer className="bg-green text-offwhite/80">
      <div className="border-t hr-light">
        <Container className="py-16 md:py-20">
          <div className="grid grid-cols-1 md:grid-cols-12 gap-12">
            <div className="md:col-span-6">
              <Wordmark tone="light" />
              <p className="mt-6 max-w-[36ch] text-offwhite/65 text-[14.5px] leading-[1.7]">
                <T
                  en="Boutique property management on the Guanacaste coast — caring for the homes you've trusted us with, season after season."
                  es="Administración boutique en la costa de Guanacaste — cuidando las casas que nos confían, temporada tras temporada." />
                
              </p>
              <div className="mt-8 flex items-center gap-4">
                {[IcInstagram, IcFacebook, IcLinkedIn, IcWhatsApp].map((Ico, i) =>
                <a key={i} href="#" aria-label="social" className="h-10 w-10 rounded-full border border-offwhite/25 inline-flex items-center justify-center hover:bg-terracotta hover:border-terracotta transition-colors">
                    <Ico className="h-4 w-4" />
                  </a>
                )}
              </div>
            </div>

            <FooterCol
              span={3}
              title={{ en: 'Contact', es: 'Contacto' }}
              items={[
              { en: 'Golden Coast, Guanacaste', es: 'Golden Coast, Guanacaste' },
              { en: '+506 8509 6767', es: '+506 8509 6767' },
              { en: 'WhatsApp +506 8509 6767', es: 'WhatsApp +506 8509 6767' },
              { en: 'sianny@summerhomecr.com', es: 'sianny@summerhomecr.com' }]
              } />
            

            <FooterCol
              span={3}
              title={{ en: 'Quick links', es: 'Enlaces' }}
              items={[
              { en: 'Services', es: 'Servicios', href: '#owners' },
              { en: 'Owner portal', es: 'Portal del propietario', href: '#transparency' },
              { en: 'Book a stay', es: 'Reservar estadía', href: '#guests' },
              { en: 'About', es: 'Nosotros', href: '#values' }]
              } />
            
          </div>
        </Container>
      </div>

      {/* Bottom strip */}
      <div className="border-t hr-light">
        <Container className="py-6 flex flex-col md:flex-row md:items-center md:justify-between gap-4 text-[12.5px] text-offwhite/55">
          <div>© 2026 Summer Home CR, S.A. · <T en="All rights reserved." es="Todos los derechos reservados." /></div>
          <div className="flex items-center gap-6">
            <div className="lang-pill flex items-center gap-2">
              <button onClick={() => setLang('en')} className={lang === 'en' ? 'text-offwhite' : 'text-offwhite/45 hover:text-offwhite/70'}>EN</button>
              <span className="text-offwhite/25">/</span>
              <button onClick={() => setLang('es')} className={lang === 'es' ? 'text-offwhite' : 'text-offwhite/45 hover:text-offwhite/70'}>ES</button>
            </div>
          </div>
        </Container>
      </div>
    </footer>);

};

const FooterCol = ({ title, items, span = 2 }) =>
<div className={"md:col-span-" + span}>
    <div className="kicker text-mustard mb-5"><T en={title.en} es={title.es} /></div>
    <ul className="space-y-2.5 text-[14px] text-offwhite/70">
      {items.map((it, i) =>
    <li key={i}>
          {it.href ?
      <a href={it.href} className="hover:text-offwhite transition-colors"><T en={it.en} es={it.es} /></a> :

      <span><T en={it.en} es={it.es} /></span>
      }
        </li>
    )}
    </ul>
  </div>;


Object.assign(window, { WhatsAppCTA, FinalCTA, Footer, ContactForm, Field, FooterCol });