// Zones, For Guests, Sustainability, Testimonials

// --- ZONES ---
const Zones = () => {
  const zones = [
    { name: 'Playa Langosta',  photo: PHOTOS.langosta,    en: 'Hidden cove just south of Tamarindo, gentler crowd.',  es: 'Cala escondida al sur de Tamarindo, ambiente tranquilo.' },
    { name: 'Tamarindo',       photo: PHOTOS.tamarindo,   en: 'Surf town energy, walkable beachfront.',                 es: 'Energía surfer, playa caminable.' },
    { name: 'Playa Grande',    photo: PHOTOS.playagrande, en: 'Long, wild beach — leatherback turtle nesting grounds.', es: 'Playa larga y salvaje — anidación de tortugas baula.' },
    { name: 'Flamingo',        photo: PHOTOS.flamingo,    en: 'White sand bay, marina, quiet evenings.',                es: 'Bahía de arena blanca, marina, noches tranquilas.' },
  ];
  return (
    <Section id="zones" bg="offwhite" label="06 Zones" className="py-24 md:py-32">
      <Container>
        <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-12 md:mb-16">
          <div>
            <Reveal>
              <div className="kicker text-terracotta mb-5 flex items-center gap-3">
                <span className="h-px w-8 bg-terracotta/70" />
                <T en="Zones we serve" es="Zonas que servimos" />
              </div>
            </Reveal>
            <Reveal delay={60}>
              <h2 className="h-serif text-4xl md:text-5xl lg:text-[58px] text-green max-w-[18ch]" data-comment-anchor="zones-headline">
                <T
                  en={<>From the surf at Playa Langosta <em className="accent-terra">to the white-sand bay of Flamingo.</em></>}
                  es={<>Desde el surf de Playa Langosta  <em className="accent-terra">hasta la bahía de arena blanca de Flamingo.</em></>}
                />
              </h2>
            </Reveal>
          </div>
          <Reveal delay={120}>
            <p className="max-w-[40ch] text-ink/75 leading-[1.7] text-[15px]">
              <T
                en="We work the heart of the Guanacaste coast — close enough to drive between any two homes before lunch. Our central office in Tamarindo coordinates operations, guest concierge and emergency maintenance across all four zones."
                es="Trabajamos en el corazón de la costa de Guanacaste — lo bastante cerca para conducir entre dos casas antes del almuerzo. Nuestra oficina central en Tamarindo coordina operaciones, conserjería y mantenimiento de emergencia en las cuatro zonas."
              />
            </p>
          </Reveal>
        </div>

        {/* Horizontal scroll on mobile, 4-col grid on lg */}
        <div className="lg:grid lg:grid-cols-4 lg:gap-5 flex gap-4 overflow-x-auto no-scrollbar -mx-6 px-6 lg:mx-0 lg:px-0 snap-x snap-mandatory">
          {zones.map((z, i) => (
            <Reveal key={z.name} delay={i * 60} className="snap-start shrink-0 w-[78%] sm:w-[44%] lg:w-auto">
              <article className="lift bg-offwhite border hr-ink h-full flex flex-col">
                <Placeholder
                  label={`${z.name} — coastal scene, low aperture, golden hour`}
                  ratio="4/5"
                  src={z.photo}
                />
                <div className="p-5 md:p-6 flex-1 flex flex-col">
                  <div className="flex items-center justify-between">
                    <h3 className="h-serif text-2xl text-green">{z.name}</h3>
                    <IcMapPin className="h-4 w-4 text-ink/40" />
                  </div>
                  <p className="mt-2 italic text-ink/70 text-[14px] leading-[1.6] font-serif" style={{ fontFamily: '"Instrument Serif", serif', fontSize: '20px', lineHeight: 1.25 }}>
                    <T en={z.en} es={z.es} />
                  </p>
                </div>
              </article>
            </Reveal>
          ))}
        </div>
      </Container>
    </Section>
  );
};

// --- FOR GUESTS ---
const ForGuests = () => {
  const homes = [
    { name: 'Casa Higuerón',  zone: 'Tamarindo',      photo: PHOTOS.home1, en: '4 br · ocean view · walk to beach', es: '4 hab · vista al mar · cerca de la playa', from: '$ 480' },
    { name: 'Villa Talanguera', zone: 'Playa Grande',  photo: PHOTOS.home2, en: '3 br · rooftop plunge · turtle-nesting beach', es: '3 hab · piscina en azotea · playa de tortugas', from: '$ 620' },
    { name: 'Casa Mareas',    zone: 'Playa Langosta', photo: PHOTOS.home3, en: '5 br · private cove · chef on call',   es: '5 hab · cala privada · chef bajo demanda',  from: '$ 920' },
  ];
  return (
    <Section id="guests" bg="sand" label="07 For Guests" className="py-24 md:py-32">
      <Container>
        <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-12">
          <div className="max-w-[44ch]">
            <Reveal>
              <div className="kicker text-sage mb-5 flex items-center gap-3">
                <span className="h-px w-8 bg-sage/70" />
                <T en="For guests" es="Para huéspedes" />
              </div>
            </Reveal>
            <Reveal delay={60}>
              <h2 className="h-serif text-3xl md:text-[44px] lg:text-5xl text-green" data-comment-anchor="guests-headline">
                <T
                  en={<>Looking for your <em className="accent-terra">Guanacaste getaway?</em></>}
                  es={<>¿Busca su <em className="accent-terra">escape en Guanacaste?</em></>}
                />
              </h2>
            </Reveal>
            <Reveal delay={120}>
              <p className="mt-5 text-ink/75 leading-[1.75]">
                <T
                  en="A small, hand-picked collection of homes — every one walked, photographed and stocked by our team. Ask us what fits your family; we’ll answer the same day."
                  es="Una colección pequeña y seleccionada a mano — cada casa caminada, fotografiada y abastecida por nuestro equipo. Cuéntenos lo que busca; responderemos el mismo día."
                />
              </p>
            </Reveal>
          </div>
          <Reveal delay={160}>
            <a href="#contact" className="btn btn-outline btn-outline-dark"><T en="Browse the collection" es="Vea la colección" /><IcArrowRight className="h-4 w-4" /></a>
          </Reveal>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
          {homes.map((h, i) => (
            <Reveal key={h.name} delay={i * 80}>
              <article className="lift bg-offwhite border hr-ink overflow-hidden h-full flex flex-col group">
                <Placeholder label={`${h.name} — exterior + pool, wide`} ratio="5/4" src={h.photo} />
                <div className="p-6 flex-1 flex flex-col">
                  <div className="flex items-center justify-between gap-3">
                    <h3 className="h-serif text-[26px] text-green leading-tight">{h.name}</h3>
                    <span className="kicker text-ink/55">{h.zone}</span>
                  </div>
                  <p className="mt-2 text-ink/70 text-[14.5px] leading-[1.6]"><T en={h.en} es={h.es} /></p>
                  <div className="mt-5 pt-4 border-t hr-ink flex items-center justify-between">
                    <div>
                      <div className="kicker text-ink/50"><T en="from / night" es="desde / noche" /></div>
                      <div className="h-serif text-2xl text-green mt-0.5">{h.from} <span className="text-ink/50 text-[14px] tracking-normal">USD</span></div>
                    </div>
                    <a href="#contact" className="inline-flex items-center gap-1.5 text-terracotta text-[14px] group-hover:text-terra2">
                      <T en="Enquire" es="Consultar" /> <IcArrowUpRight className="h-4 w-4" />
                    </a>
                  </div>
                </div>
              </article>
            </Reveal>
          ))}
        </div>
      </Container>
    </Section>
  );
};

// --- SUSTAINABILITY ---
const Values = () => {
  const badges = [
    { Icon: IcLeaf,      en: 'Biodegradable products', es: 'Productos biodegradables' },
    { Icon: IcHandshake, en: 'Local certified partners', es: 'Aliados locales certificados' },
    { Icon: IcDrop,      en: 'Water conservation', es: 'Ahorro de agua' },
  ];
  return (
    <Section id="values" bg="sage" label="08 Values" className="py-24 md:py-32 relative overflow-hidden">
      {/* faint stripe texture overlay */}
      <div aria-hidden="true" className="absolute inset-0 opacity-[0.07]"
           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 items-center">
          <div className="lg:col-span-7">
            <Reveal>
              <div className="kicker text-mustard mb-5 flex items-center gap-3">
                <span className="h-px w-8 bg-mustard/70" />
                <T en="Sustainability & values" es="Sostenibilidad y valores" />
              </div>
            </Reveal>
            <Reveal delay={60}>
              <h2 className="h-serif text-4xl md:text-5xl lg:text-[64px] text-offwhite" data-comment-anchor="values-headline">
                <T
                  en={<>Hospitality <em className="accent-mustard">with roots.</em></>}
                  es={<>Hospitalidad <em className="accent-mustard">con raíces.</em></>}
                />
              </h2>
            </Reveal>
            <Reveal delay={140}>
              <p className="mt-7 text-offwhite/85 leading-[1.8] max-w-[58ch] text-[16.5px]">
                <T
                  en="We clean with biodegradable products, conserve water with grey-water systems where the property allows and partner first with certified local vendors — from the family who grows the herbs to the carpenter who repairs a teak rail. Guanacaste raised us; we run a business that gives something back."
                  es="Limpiamos con productos biodegradables, ahorramos agua con sistemas de aguas grises donde la propiedad lo permite y nos asociamos primero con proveedores locales certificados — desde la familia que cultiva las hierbas hasta el carpintero que repara una baranda de teca. Guanacaste nos crió; manejamos un negocio que devuelve algo." />
              </p>
            </Reveal>
            <Reveal delay={220}>
              <div className="mt-10 flex flex-wrap gap-3">
                {badges.map(({ Icon, en, es }, i) => (
                  <div key={i} className="inline-flex items-center gap-3 border border-offwhite/30 rounded-full pl-3 pr-5 py-2.5 text-offwhite/90 text-[13.5px]">
                    <Icon className="h-4.5 w-4.5" stroke={1.5} />
                    <span><T en={en} es={es} /></span>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
          <div className="lg:col-span-5">
            <Reveal>
              <Placeholder
                label="Garden detail — gardener trimming heliconia at sunrise"
                ratio="4/5"
                variant="sage"
                src={PHOTOS.garden}
                className="border border-offwhite/15"
              />
            </Reveal>
          </div>
        </div>
      </Container>
    </Section>
  );
};

// --- TESTIMONIALS ---
const Testimonials = () => {
  const quotes = [
    {
      en: 'They handled the rainy-season roof repair in two days while we were in Calgary. The owner statement showed every receipt. We never worried once.',
      es: 'Resolvieron la reparación del techo en plena temporada lluviosa en dos días, mientras estábamos en Calgary. El estado de cuenta mostró cada recibo. No nos preocupamos ni un momento.',
      name: 'Megan & Paul R.',
      place: 'Owners · Flamingo',
    },
    {
      en: 'After two other managers, finally a team that picks up the phone — in English or Spanish — and tells the truth about what the house needs.',
      es: 'Después de dos administradores anteriores, por fin un equipo que contesta el teléfono — en inglés o español — y dice la verdad sobre lo que la casa necesita.',
      name: 'Familia Vargas',
      place: 'Propietarios · Playa Grande',
    },
    {
      en: 'Occupancy is up, the garden looks better than when we bought the place and the monthly report fits on one page. That tells you everything.',
      es: 'La ocupación subió, el jardín está mejor que cuando compramos la casa y el reporte mensual cabe en una página. Eso lo dice todo.',
      name: 'David K.',
      place: 'Owner · Tamarindo',
    },
  ];
  return (
    <Section bg="sand" className="py-24 md:py-32 border-y hr-ink" label="09 Testimonials">
      <Container>
        <Reveal>
          <div className="kicker text-terracotta mb-5 flex items-center gap-3 justify-center">
            <span className="h-px w-8 bg-terracotta/70" />
            <T en="What owners say" es="Lo que dicen los propietarios" />
            <span className="h-px w-8 bg-terracotta/70" />
          </div>
        </Reveal>
        <Reveal delay={60}>
          <h2 className="h-serif text-3xl md:text-5xl text-green text-center max-w-[22ch] mx-auto">
            <T
              en={<>Quiet confidence, <em className="accent-terra">built one season at a time.</em></>}
              es={<>Confianza tranquila, <em className="accent-terra">construida temporada a temporada.</em></>}
            />
          </h2>
        </Reveal>

        <div className="mt-14 md:mt-20 grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-10">
          {quotes.map((q, i) => (
            <Reveal key={i} delay={i * 90}>
              <figure className="h-full flex flex-col">
                <div className="h-serif text-terracotta text-6xl leading-none mb-3" aria-hidden="true">“</div>
                <blockquote className="h-serif italic text-[22px] md:text-[24px] leading-[1.4] text-ink/90 flex-1">
                  <T en={q.en} es={q.es} />
                </blockquote>
                <figcaption className="mt-6 pt-5 border-t hr-ink">
                  <div className="text-[14px] text-green font-medium">{q.name}</div>
                  <div className="kicker text-ink/55 mt-1">{q.place}</div>
                </figcaption>
              </figure>
            </Reveal>
          ))}
        </div>
      </Container>
    </Section>
  );
};

Object.assign(window, { Zones, ForGuests, Values, Testimonials });