// Nav, Hero, Trust strip, For Owners, Owner Portal (Transparency)

const { useState: useStateT, useEffect: useEffectT } = React;

// --- NAV ---
const Nav = () => {
  const { lang, setLang } = useLang();
  const [scrolled, setScrolled] = useStateT(false);
  const [openMenu, setOpenMenu] = useStateT(false);

  useEffectT(() => {
    const onScroll = () => setScrolled(window.scrollY > 14);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const linksEn = [
  ['Services', '#owners'],
  ['Zones', '#zones'],
  ['For Owners', '#owners'],
  ['For Guests', '#guests'],
  ['About', '#values'],
  ['Contact', '#contact']];

  const linksEs = [
  ['Servicios', '#owners'],
  ['Zonas', '#zones'],
  ['Para propietarios', '#owners'],
  ['Para huéspedes', '#guests'],
  ['Nosotros', '#values'],
  ['Contacto', '#contact']];

  const links = lang === 'es' ? linksEs : linksEn;

  return (
    <header className={"fixed top-0 inset-x-0 z-50 transition-colors duration-300 " + (scrolled ? "nav-blur border-b hr-ink" : "bg-transparent")}>
      <div className="mx-auto max-w-[1280px] px-6 md:px-10 h-[68px] flex items-center justify-between">
        <Wordmark tone={scrolled ? "dark" : "light"} />
        <nav className="hidden lg:flex items-center gap-7">
          {links.map(([l, h]) =>
          <a key={l} href={h}
          className={"text-[13.5px] transition-colors " + (scrolled ? "text-ink/75 hover:text-ink" : "text-offwhite/85 hover:text-offwhite")}>
              {l}
            </a>
          )}
        </nav>
        <div className="flex items-center gap-4">
          <div className="hidden sm:flex items-center gap-2 lang-pill">
            <button onClick={() => setLang('en')}
            className={scrolled ?
            lang === 'en' ? 'lang-active' : 'lang-idle hover:text-ink/70' :
            lang === 'en' ? 'text-offwhite' : 'text-offwhite/55 hover:text-offwhite/80'}
            aria-label="English">EN</button>
            <span className={scrolled ? "text-ink/25" : "text-offwhite/35"}>/</span>
            <button onClick={() => setLang('es')}
            className={scrolled ?
            lang === 'es' ? 'lang-active' : 'lang-idle hover:text-ink/70' :
            lang === 'es' ? 'text-offwhite' : 'text-offwhite/55 hover:text-offwhite/80'}
            aria-label="Español">ES</button>
          </div>
          <a href="#contact" className="btn btn-primary hidden md:inline-flex">
            <T en="Let's Talk" es="Conversemos" />
            <IcArrowRight className="h-4 w-4" />
          </a>
          <button className={"lg:hidden -mr-2 p-2 " + (scrolled ? "text-ink" : "text-offwhite")}
          aria-label="Menu" onClick={() => setOpenMenu((v) => !v)}>
            {openMenu ? <IcClose className="h-6 w-6" /> : <IcMenu className="h-6 w-6" />}
          </button>
        </div>
      </div>
      {openMenu &&
      <div className="lg:hidden border-t hr-ink bg-sand">
          <div className="mx-auto max-w-[1280px] px-6 py-5 flex flex-col gap-3">
            {links.map(([l, h]) =>
          <a key={l} href={h} onClick={() => setOpenMenu(false)} className="h-serif text-2xl text-ink">{l}</a>
          )}
            <div className="flex items-center gap-3 pt-3 lang-pill">
              <button onClick={() => setLang('en')} className={lang === 'en' ? 'lang-active' : 'lang-idle'}>EN</button>
              <span className="text-ink/25">/</span>
              <button onClick={() => setLang('es')} className={lang === 'es' ? 'lang-active' : 'lang-idle'}>ES</button>
            </div>
            <a href="#contact" onClick={() => setOpenMenu(false)} className="btn btn-primary mt-3 self-start">
              <T en="Let's Talk" es="Conversemos" />
            </a>
          </div>
        </div>
      }
    </header>);

};

// --- HERO ---
const Hero = () =>
<section id="top" data-screen-label="01 Hero" className="relative isolate min-h-[760px] md:min-h-[88vh] flex items-end overflow-hidden">
    {/* Background image */}
    <Placeholder
    label="hero — wide beach villa exterior, late afternoon, Guanacaste palms"
    ratio="auto"
    variant="green"
    src={PHOTOS.hero}
    position="center 60%"
    className="!absolute inset-0 !w-full !h-full !aspect-auto" />
  
    {/* Vertical gradient: subtle at top, strong at bottom */}
    <div aria-hidden="true" className="absolute inset-0"
  style={{ background: 'linear-gradient(180deg, rgba(44,74,62,0.55) 0%, rgba(44,74,62,0.25) 30%, rgba(44,74,62,0.35) 55%, rgba(20,35,28,0.85) 100%)' }} />
    {/* Side gradient: deepen the left where the headline sits */}
    <div aria-hidden="true" className="absolute inset-0"
  style={{ background: 'linear-gradient(90deg, rgba(20,35,28,0.55) 0%, rgba(20,35,28,0.15) 45%, transparent 70%)' }} />
    {/* Subtle bottom vignette */}
    <div aria-hidden="true" className="absolute inset-0"
  style={{ background: 'radial-gradient(120% 70% at 30% 100%, rgba(0,0,0,0.45), transparent 65%)' }} />

    <Container className="relative z-10 pb-16 md:pb-24 pt-32 w-full">
      <Reveal>
        <div className="kicker text-mustard mb-6 flex items-center gap-3">
          <span className="h-px w-8 bg-mustard/80" />
          <T en="Property Management · Guanacaste" es="Administración de propiedades · Guanacaste" />
        </div>
      </Reveal>

      <Reveal delay={80}>
        <h1 className="h-serif text-offwhite text-[44px] sm:text-[64px] md:text-[82px] lg:text-[96px] max-w-[15ch]"
      style={{ textShadow: '0 2px 30px rgba(0,0,0,0.35)' }}
      data-comment-anchor="hero-headline">
          <T
          en={<>Your investment, <em className="accent-mustard">cared for like home.</em></>}
          es={<>Su inversión, <em className="accent-mustard">cuidada como propia.</em></>} />
        
        </h1>
      </Reveal>

      <Reveal delay={160}>
        <p className="mt-7 max-w-[52ch] text-offwhite/85 text-[17px] md:text-[18px] leading-[1.65]">
          <T
          en="Boutique property management on the Pacific Coast of Costa Rica — rentals, maintenance and financial care for the homes you’ve trusted us with."
          es="Administración boutique en el Pacífico de Costa Rica — rentas, mantenimiento y cuidado financiero para las casas que nos confían." />
        
        </p>
      </Reveal>

      <Reveal delay={240}>
        <div className="mt-10 flex flex-wrap items-center gap-3">
          <a href="#contact" className="btn btn-primary">
            <T en="List your home" es="Liste su propiedad" />
            <IcArrowRight className="h-4 w-4" />
          </a>
          <a href="#guests" className="btn btn-outline btn-outline-light">
            <T en="Book a stay" es="Reserve su estadía" />
          </a>
        </div>
      </Reveal>

      {/* Scroll cue */}
      <div className="hidden md:flex items-center gap-3 absolute right-10 bottom-12 text-offwhite/70">
        <span className="kicker">scroll</span>
        <span className="h-12 w-px bg-offwhite/40" />
      </div>
    </Container>
  </section>;


// --- TRUST STRIP (service pathways) ---
const TrustStrip = () => {
  return (
    <Section bg="sand" className="border-y hr-ink">
      {/* Three service pathways → dedicated pages */}
      <Container className="py-0">
        <div className="grid grid-cols-1 md:grid-cols-3 md:divide-x divide-ink/10 divide-y md:divide-y-0">
          {[
          { Icon: IcHome, href: 'pages/property-management.html', en: { t: 'Property Management', d: 'Full-service care for your home year-round.' }, es: { t: 'Administración de Propiedades', d: 'Cuidado integral de su casa, todo el año.' } },
          { Icon: IcSun, href: 'pages/vacation-rentals.html', en: { t: 'Vacation Rentals', d: 'Book a hand-picked Guanacaste stay.' }, es: { t: 'Rentas Vacacionales', d: 'Reserve una estadía seleccionada en Guanacaste.' } },
          { Icon: IcLifebuoy, href: 'pages/sos-services.html', en: { t: 'SOS Services', d: 'On-call help when your home needs it most.' }, es: { t: 'Servicios SOS', d: 'Ayuda inmediata cuando su casa más lo necesita.' } }].
          map((c, i) =>
          <Reveal key={i} delay={i * 70}>
              <a href={c.href}
            className="group flex items-start gap-4 px-6 md:px-8 py-9 md:py-10 transition-colors hover:bg-offwhite first:pl-6 md:first:pl-8">
                <span className="shrink-0 mt-0.5 h-11 w-11 rounded-full border hr-ink flex items-center justify-center text-green transition-colors group-hover:border-terracotta group-hover:text-terracotta">
                  <c.Icon className="h-5 w-5" />
                </span>
                <span className="flex-1">
                  <span className="flex items-center gap-2">
                    <span className="h-serif text-2xl md:text-[26px] text-green leading-none"><T en={c.en.t} es={c.es.t} /></span>
                    <IcArrowUpRight className="h-4 w-4 text-ink/30 transition-all group-hover:text-terracotta group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
                  </span>
                  <span className="block mt-2 text-[13.5px] text-ink/65 leading-[1.55] max-w-[30ch]"><T en={c.en.d} es={c.es.d} /></span>
                </span>
              </a>
            </Reveal>
          )}
        </div>
      </Container>
    </Section>);

};

// --- WHO WE ARE ---
const WhoWeAre = () =>
<Section id="about" bg="offwhite" label="03 Who we are" className="py-24 md:py-36 border-b hr-ink">
    <Container>
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16">
        <div className="lg:col-span-5">
          <Reveal>
            <div className="kicker text-terracotta mb-6 flex items-center gap-3">
              <span className="h-px w-8 bg-terracotta/70" />
              <T en="Who we are · Quiénes somos" es="Quiénes somos · Who we are" />
            </div>
          </Reveal>
          <Reveal delay={60}>
            <h2 className="h-serif text-4xl md:text-5xl lg:text-[62px] text-green" data-comment-anchor="about-headline">
              <T
              en={<>A long coast.<br />A short list of homes.</>}
              es={<>Una costa larga.<br />Una lista corta de propiedades.</>} />
            
            </h2>
          </Reveal>
        </div>

        <div className="lg:col-span-7 lg:pt-3">
          <Reveal delay={120}>
            <p className="h-serif text-[26px] md:text-[32px] leading-[1.25] text-ink/85 max-w-[40ch]">
              <T
              en="Summer Home CR looks after homes along the Pacific Coast of Costa Rica — from the surf at Playa Langosta to the white-sand bay of Flamingo."
              es="Summer Home CR cuida propiedaes a lo largo de la Costa Pacífica de Costa Rica — desde el surf de Playa Langosta hasta la bahía de arena blanca de Flamingo." />
            
            </p>
          </Reveal>
          <Reveal delay={180}>
            <div className="mt-10 grid sm:grid-cols-2 gap-x-10 gap-y-6 text-ink/75 text-[15px] leading-[1.75] max-w-[60ch]">
              <p>
                <T
                en="We are a small year-round team — owners are international, hosts are local. Every guest meets the same warm Costa Rican welcome, whether they're coming from Calgary, Madrid, or San José."
                es="Somos un equipo pequeño, presente todo el año — los propietarios son internacionales, los anfitriones somos locales. Cada huésped recibe la misma bienvenida costarricense, venga de Calgary, Madrid o San José." />
              
              </p>
              <p style={{ fontWeight: "400" }}>
                <T
                en="A  premium service set against a quieter idea of luxury: transparent accounting, on-time payments, hands-on home care and the same human on the phone every time."
                es="Un servicio  premium con una idea más callada del lujo: contabilidad transparente, pagos puntuales, cuidado artesanal del hogar y la misma persona al teléfono, siempre." />
              
              </p>
            </div>
          </Reveal>
          <Reveal delay={240}>
            <div className="mt-12 pt-6 border-t hr-ink flex flex-wrap items-baseline gap-x-8 gap-y-3">
              <div className="kicker text-ink/55">
                <T en="Headquarters" es="Sede" />
              </div>
              <div className="h-serif text-[22px] text-green">
                <T en="Guanacaste" es="Guanacaste" />
              </div>
              <div className="kicker text-ink/55 ml-auto hidden md:block">
                <T en="Service across the coast" es="Servicio en toda la costa" />
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </Container>
  </Section>;


// --- FOR OWNERS ---
const ForOwners = () => {
  const services = [
  {
    Icon: IcCalendar,
    en: { t: 'Vacation Rental Management', b: 'Listings on Airbnb, Vrbo and direct channels. Bookings, dynamic pricing and 24/7 guest communication — in two languages.' },
    es: { t: 'Administración de rentas vacacionales', b: 'Anuncios en Airbnb, Vrbo y canales directos. Reservas, precios dinámicos y comunicación 24/7 con el huésped — en dos idiomas.' }
  },
  {
    Icon: IcWrench,
    en: { t: 'Specialized Maintenance', b: 'Expert swimming pool care and tropical garden landscaping. Preventive work tuned to the coastal climate — salt, humidity and rain.' },
    es: { t: 'Mantenimiento especializado', b: 'Cuidado experto de piscina y diseño de jardines tropicales. Trabajo preventivo ajustado al clima costero — salitre, humedad, temporada lluviosa.' }
  },
  {
    Icon: IcLedger,
    en: { t: 'Financial & Legal Administration', b: 'Timely payment of utilities, property taxes and insurance. Transparent monthly statements you can read in one page.' },
    es: { t: 'Administración financiera y legal', b: 'Pago puntual de servicios, impuestos territoriales y seguros. Estados financieros mensuales transparentes, en una sola página.' }
  },
  {
    Icon: IcSparkleBroom,
    en: { t: 'Professional Housekeeping', b: 'Deep sanitation, premium linen management and rigorous turnover before and after every guest stay.' },
    es: { t: 'Limpieza profesional', b: 'Sanitización profunda, manejo de blancos premium y preparación rigurosa antes y después de cada estadía.' }
  }];


  return (
    <Section id="owners" bg="sand" label="04 For Owners" className="pt-24 md:pt-32 pb-24 md:pb-32">
      <Container>
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-start">
          {/* Left */}
          <div className="lg:col-span-5 lg:sticky lg:top-28">
            <Reveal>
              <div className="kicker text-terracotta mb-6 flex items-center gap-3">
                <span className="h-px w-8 bg-terracotta/70" />
                <T en="For owners" es="Para propietarios" />
              </div>
            </Reveal>
            <Reveal delay={60}>
              <h2 className="h-serif text-4xl md:text-5xl lg:text-[58px] text-green" data-comment-anchor="owners-headline" style={{ fontFamily: "\"Instrument Serif\"" }}>
                <T
                  en={<>We protect your investment.<br /><em className="accent-terra">You collect the returns.</em></>}
                  es={<>Protegemos su inversión.<br /><em className="accent-terra">Usted recibe los rendimientos.</em></>} />
                
              </h2>
            </Reveal>
            <Reveal delay={140}>
              <p className="mt-7 text-ink/80 leading-[1.75] max-w-[42ch]">
                <T
                  en="A small, owner-led team year round in Tamarindo year-round. Every home is treated like our own — protected against salt and rain, presented at its best, accounted for to the last cent. Transparent quotes, hotel-grade hospitality and the same human on the phone every time."
                  es="Un equipo pequeño, dirigido por sus dueños, presente en Tamarindo todo el año. Cada casa se cuida como propia — protegida del salitre y la lluvia, presentada en su mejor versión, contabilizada hasta el último  dólar. Cotizaciones transparentes, hospitalidad nivel hotel y la misma persona al teléfono, siempre." />
                
              </p>
            </Reveal>
            <Reveal delay={200}>
              <div className="mt-9 flex flex-wrap gap-3">
                <a href="#contact" className="btn btn-primary"><T en="Talk to us" es="Hablemos" /><IcArrowRight className="h-4 w-4" /></a>
                <a href="#transparency" className="hidden btn btn-outline btn-outline-dark"><T en="See the owner portal" es="Vacation Rentals" /></a>
              </div>
            </Reveal>
          </div>

          {/* Right: 2x2 grid */}
          <div className="lg:col-span-7 grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-5">
            {services.map((s, i) => {
              const copy = s; // shape per lang taken inline
              return (
                <Reveal key={i} delay={i * 80}>
                  <article className="lift bg-offwhite border hr-ink p-7 md:p-8 h-full flex flex-col">
                    <copy.Icon className="h-7 w-7 text-green" />
                    <h3 className="h-serif text-2xl md:text-[26px] text-green mt-6 leading-tight">
                      <T en={copy.en.t} es={copy.es.t} />
                    </h3>
                    <p className="mt-3 text-ink/75 text-[14.5px] leading-[1.7]">
                      <T en={copy.en.b} es={copy.es.b} />
                    </p>
                  </article>
                </Reveal>);

            })}
          </div>
        </div>
      </Container>
    </Section>);

};

// --- OWNER PORTAL / TRANSPARENCY ---
const Transparency = () => {
  return (
    <Section id="transparency" bg="offwhite" label="05 Owner Portal" className="hidden py-24 md:py-32 border-y hr-ink">
      <Container>
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
          <div className="lg:col-span-5">
            <Reveal>
              <div className="kicker text-sage mb-6 flex items-center gap-3">
                <span className="h-px w-8 bg-sage/70" />
                <T en="Owner portal" es="Portal del propietario" />
              </div>
            </Reveal>
            <Reveal delay={60}>
              <h2 className="h-serif text-4xl md:text-5xl text-green" data-comment-anchor="transparency-headline">
                <T
                  en={<>Total transparency. <em className="accent-terra">Every month.</em></>}
                  es={<>Transparencia total. <em className="accent-terra">Cada mes.</em></>} />
                
              </h2>
            </Reveal>
            <Reveal delay={120}>
              <p className="mt-6 text-ink/80 leading-[1.75] max-w-[44ch]">
                <T
                  en="A monthly statement with every booking, every expense, every reserve — delivered as a PDF and live in your owner dashboard. Watch occupancy and revenue update as bookings come in. Ask questions in plain language and get answers from the same human, every time."
                  es="Un estado de cuenta mensual con cada reserva, cada gasto y cada ingreso — entregado en PDF y en vivo en su panel. Vea ocupación e ingresos actualizarse al instante." />
                
              </p>
            </Reveal>
            <Reveal delay={180}>
              <ul className="mt-8 space-y-3">
                {[
                { en: 'Monthly statement, PDF + portal', es: 'Estado mensual, PDF y portal' },
                { en: 'Live occupancy and revenue MTD', es: 'Ocupación e ingresos del mes en vivo' },
                { en: 'Maintenance log with photo notes', es: 'Bitácora de mantenimiento con fotos' },
                { en: 'One named manager per home', es: 'Un administrador asignado por casa' }].
                map((it, i) =>
                <li key={i} className="flex items-start gap-3 text-ink/85">
                    <IcCheck className="h-5 w-5 text-terracotta mt-[3px] shrink-0" />
                    <span className="text-[15px]"><T en={it.en} es={it.es} /></span>
                  </li>
                )}
              </ul>
            </Reveal>
          </div>

          {/* Dashboard mockup */}
          <div className="lg:col-span-7">
            <Reveal>
              <DashboardMock />
            </Reveal>
          </div>
        </div>
      </Container>
    </Section>);

};

const DashboardMock = () =>
<div className="bg-offwhite border hr-ink shadow-[0_30px_60px_-30px_rgba(44,74,62,0.35)]">
    {/* Window bar */}
    <div className="flex items-center justify-between px-5 py-3 border-b hr-ink bg-sand">
      <div className="flex items-center gap-2">
        <span className="h-2.5 w-2.5 rounded-full bg-terracotta/70" />
        <span className="h-2.5 w-2.5 rounded-full bg-mustard/80" />
        <span className="h-2.5 w-2.5 rounded-full bg-sage/70" />
      </div>
      <div className="ph-label text-ink/55">summerhomecr.com / owner / villa-tamarindo-04</div>
      <div className="ph-label text-ink/40">May 2026</div>
    </div>

    {/* Header */}
    <div className="px-7 py-6 flex items-center justify-between border-b hr-ink">
      <div>
        <div className="kicker text-ink/55">Villa</div>
        <div className="h-serif text-2xl text-green mt-1">Casa Higuerón <em className="accent-terra">· Tamarindo</em></div>
      </div>
      <div className="hidden sm:flex items-center gap-2 text-[12px] text-ink/60">
        <IcMapPin className="h-4 w-4" /> Tamarindo, Guanacaste
      </div>
    </div>

    {/* KPIs */}
    <div className="grid grid-cols-3 divide-x divide-ink/10 border-b hr-ink">
      {[
    { lab: { en: 'Occupancy', es: 'Ocupación' }, val: '82%', sub: { en: 'May, MTD', es: 'Mayo, MTD' } },
    { lab: { en: 'Revenue MTD', es: 'Ingresos MTD' }, val: '$11,420', sub: { en: '+18% vs. Apr', es: '+18% vs. abr' } },
    { lab: { en: 'Next booking', es: 'Próxima reserva' }, val: 'May 22', sub: { en: '7 nights · 6 guests', es: '7 noches · 6 huéspedes' } }].
    map((k, i) =>
    <div key={i} className="px-6 py-6">
          <div className="kicker text-ink/55"><T en={k.lab.en} es={k.lab.es} /></div>
          <div className="h-serif text-3xl md:text-[34px] text-green mt-2">{k.val}</div>
          <div className="text-[12px] text-ink/55 mt-1"><T en={k.sub.en} es={k.sub.es} /></div>
        </div>
    )}
    </div>

    {/* Chart-ish row */}
    <div className="px-7 py-6">
      <div className="flex items-end justify-between mb-3">
        <div>
          <div className="kicker text-ink/55"><T en="Bookings · last 6 months" es="Reservas · últimos 6 meses" /></div>
          <div className="text-ink/70 text-[13px] mt-1"><T en="Net of fees and reserves" es="Neto de comisiones y reservas" /></div>
        </div>
        <div className="hidden md:flex items-center gap-3 text-[12px] text-ink/60">
          <span className="inline-flex items-center gap-2"><span className="h-2 w-2 rounded-full bg-green" /> {`Revenue`}</span>
          <span className="inline-flex items-center gap-2"><span className="h-2 w-2 rounded-full bg-mustard" /> Bookings</span>
        </div>
      </div>
      {/* mini bar chart */}
      <div className="grid grid-cols-6 gap-3 h-32 items-end">
        {[42, 58, 51, 64, 76, 82].map((h, i) =>
      <div key={i} className="flex flex-col items-stretch gap-1">
            <div className="bg-green/85" style={{ height: h + '%' }} />
            <div className="bg-mustard h-1.5" style={{ width: Math.max(35, h - 20) + '%' }} />
            <div className="text-[11px] text-ink/50 text-center mt-1">{['Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May'][i]}</div>
          </div>
      )}
      </div>
    </div>

    {/* Statement row */}
    <div className="px-7 py-5 border-t hr-ink bg-sand/60 flex items-center justify-between text-[13px]">
      <div className="flex items-center gap-3 text-ink/75">
        <IcLedger className="h-4 w-4 text-green" />
        <T en="April 2026 statement ready" es="Estado de abril 2026 listo" />
      </div>
      <a className="text-terracotta inline-flex items-center gap-1.5 hover:text-terra2" href="#">
        <T en="Download PDF" es="Descargar PDF" /> <IcArrowUpRight className="h-3.5 w-3.5" />
      </a>
    </div>
  </div>;


Object.assign(window, { Nav, Hero, TrustStrip, WhoWeAre, ForOwners, Transparency, DashboardMock });