/* Homepage layout — Atoll Atlas direction */

const homeStyles = {
  /* ---- Hero ---- */
  hero: {
    position: 'relative',
    paddingTop: 32,
    paddingBottom: 56,
    overflow: 'hidden',
  },
  heroGrid: {
    maxWidth: 'var(--container)',
    margin: '0 auto',
    padding: '0 var(--gutter)',
    display: 'grid',
    gridTemplateColumns: '5fr 7fr',
    gap: 64,
    alignItems: 'center',
    minHeight: 600,
  },
  heroLeft: { display: 'flex', flexDirection: 'column', gap: 28 },
  issueBlock: {
    display: 'flex', alignItems: 'center', gap: 12,
    fontFamily: 'var(--font-mono)', fontSize: 11,
    letterSpacing: '0.16em', textTransform: 'uppercase',
    color: 'var(--coral)',
  },
  issueDot: { width: 6, height: 6, borderRadius: 999, background: 'var(--coral)' },
  heroHead: {
    fontFamily: 'var(--font-display)',
    fontSize: 'clamp(48px, 6.6vw, 88px)',
    lineHeight: 0.95,
    letterSpacing: '-0.025em',
    fontWeight: 800,
    color: 'var(--ink)',
    margin: 0,
    textWrap: 'balance',
    fontVariationSettings: "'opsz' 144, 'SOFT' 50, 'WONK' 0",
  },
  heroHeadAccent: { fontStyle: 'italic', fontWeight: 400, color: 'var(--lagoon)', fontVariationSettings: "'opsz' 144, 'SOFT' 100" },
  heroDek: {
    fontSize: 17, lineHeight: 1.55,
    color: 'var(--ink-mute)',
    maxWidth: 480,
    textWrap: 'pretty',
  },
  heroByline: {
    display: 'flex', gap: 32, alignItems: 'center',
    paddingTop: 20,
    borderTop: '1px solid var(--rule)',
  },
  bylineStat: { display: 'flex', flexDirection: 'column', gap: 2 },
  bylineNum: {
    fontFamily: 'var(--font-display)',
    fontSize: 28, fontWeight: 700,
    letterSpacing: '-0.015em',
    color: 'var(--ink)',
    fontVariationSettings: "'opsz' 24",
  },
  bylineLabel: {
    fontFamily: 'var(--font-mono)', fontSize: 10,
    letterSpacing: '0.14em', textTransform: 'uppercase',
    color: 'var(--ink-mute)',
  },
  heroPhoto: {
    aspectRatio: '4 / 5',
    borderRadius: 24,
    overflow: 'hidden',
    position: 'relative',
    boxShadow: 'var(--shadow-pop)',
  },
  heroPhotoCaption: {
    position: 'absolute',
    left: 24, bottom: 24, right: 24,
    background: 'rgba(11, 31, 37, 0.78)',
    backdropFilter: 'blur(8px)',
    color: 'var(--paper)',
    padding: '14px 16px',
    borderRadius: 8,
    fontSize: 12,
    display: 'flex', justifyContent: 'space-between',
    fontFamily: 'var(--font-mono)',
    letterSpacing: '0.05em',
  },
  heroSecondary: {
    position: 'absolute',
    bottom: -30, left: -20,
    width: 200, height: 240,
    borderRadius: 12,
    overflow: 'hidden',
    transform: 'rotate(-4deg)',
    boxShadow: 'var(--shadow-pop)',
    border: '6px solid var(--paper)',
    zIndex: 2,
  },
  searchSection: {
    background: 'var(--lagoon-deep)',
    padding: '88px 0',
    position: 'relative',
    color: 'var(--paper)',
    backgroundImage: `radial-gradient(ellipse at top right, rgba(127, 183, 181, 0.16), transparent 60%),
                      radial-gradient(ellipse at bottom left, rgba(226, 107, 63, 0.12), transparent 50%)`,
  },
  searchHead: {
    maxWidth: 'var(--container)',
    margin: '0 auto 40px',
    padding: '0 var(--gutter)',
    textAlign: 'center',
  },
  searchKicker: {
    fontFamily: 'var(--font-mono)', fontSize: 11,
    letterSpacing: '0.18em', textTransform: 'uppercase',
    color: 'var(--shallow)',
    marginBottom: 16,
  },
  searchTitle: {
    fontFamily: 'var(--font-display)',
    fontSize: 'clamp(32px, 4vw, 44px)',
    fontWeight: 700,
    letterSpacing: '-0.02em',
    color: 'var(--paper)',
    margin: '0 auto',
    maxWidth: 720,
    lineHeight: 1.1,
    textWrap: 'balance',
    fontVariationSettings: "'opsz' 144, 'SOFT' 50",
  },
  searchTitleAccent: { color: 'var(--coral)', fontStyle: 'italic', fontWeight: 400 },
  searchWrap: { maxWidth: 'var(--container)', margin: '0 auto', padding: '0 var(--gutter)', display: 'flex', justifyContent: 'center' },
  searchHint: {
    textAlign: 'center', marginTop: 28,
    fontFamily: 'var(--font-mono)', fontSize: 11,
    color: 'var(--shallow)',
    letterSpacing: '0.06em',
  },
  /* ---- Section ---- */
  section: {
    maxWidth: 'var(--container)',
    margin: '0 auto',
    padding: '88px var(--gutter) 0',
  },
  sectionHead: {
    display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
    gap: 32, paddingBottom: 24, marginBottom: 32,
    borderBottom: '1px solid var(--rule)',
  },
  sectionLeft: { maxWidth: 720 },
  sectionKicker: {
    fontFamily: 'var(--font-mono)', fontSize: 11,
    letterSpacing: '0.16em', textTransform: 'uppercase',
    color: 'var(--coral)',
    marginBottom: 8,
  },
  sectionTitle: {
    fontFamily: 'var(--font-display)',
    fontSize: 'clamp(32px, 3.6vw, 40px)',
    fontWeight: 700,
    letterSpacing: '-0.02em',
    margin: '0 0 8px 0',
    textWrap: 'balance',
    fontVariationSettings: "'opsz' 144, 'SOFT' 50",
  },
  sectionDek: { fontSize: 15, lineHeight: 1.55, color: 'var(--ink-mute)', maxWidth: 640, margin: 0 },
  sectionMeta: {
    fontFamily: 'var(--font-mono)', fontSize: 11,
    letterSpacing: '0.1em',
    color: 'var(--ink-mute)',
    whiteSpace: 'nowrap',
    display: 'flex', alignItems: 'center', gap: 16,
  },
  rail: {
    display: 'grid',
    gridTemplateColumns: 'repeat(4, 1fr)',
    gap: 28,
  },
  rail3: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28 },
  /* ---- In-Season banner ---- */
  inSeason: {
    maxWidth: 'var(--container)',
    margin: '0 auto',
    padding: '40px var(--gutter) 0',
  },
  seasonBox: {
    display: 'grid',
    gridTemplateColumns: 'auto 1fr auto',
    alignItems: 'center',
    gap: 32,
    padding: '24px 32px',
    background: 'var(--sand)',
    borderRadius: 16,
    border: '1px solid var(--rule)',
  },
  seasonLabel: {
    display: 'inline-flex', alignItems: 'center', gap: 10,
    fontFamily: 'var(--font-mono)', fontSize: 12,
    letterSpacing: '0.16em', textTransform: 'uppercase',
    color: 'var(--coral-deep)',
    fontWeight: 600,
  },
  seasonText: {
    fontFamily: 'var(--font-display)',
    fontSize: 21, lineHeight: 1.35,
    letterSpacing: '-0.01em',
    color: 'var(--ink)',
    margin: 0,
    fontVariationSettings: "'opsz' 24, 'SOFT' 50",
  },
  /* ---- Vertical chooser ---- */
  vertGrid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(5, 1fr)',
    gap: 16,
  },
  vertCard: {
    padding: 24,
    background: 'var(--surface)',
    borderRadius: 14,
    border: '1px solid var(--rule)',
    display: 'flex', flexDirection: 'column', gap: 12,
    cursor: 'pointer',
    transition: 'all 200ms cubic-bezier(0.2,0,0.2,1)',
    minHeight: 180,
  },
  vertCount: {
    fontFamily: 'var(--font-display)',
    fontSize: 32, fontWeight: 700,
    letterSpacing: '-0.02em',
    color: 'var(--ink)',
    fontVariationSettings: "'opsz' 24",
  },
  /* ---- Editorial feature ---- */
  feature: {
    maxWidth: 'var(--container)',
    margin: '0 auto',
    padding: '120px var(--gutter) 0',
    display: 'grid',
    gridTemplateColumns: '1fr 1fr',
    gap: 64,
    alignItems: 'center',
  },
  featurePhoto: {
    aspectRatio: '4 / 5',
    borderRadius: 16,
    overflow: 'hidden',
    position: 'relative',
  },
  featureCopy: { display: 'flex', flexDirection: 'column', gap: 24 },
  featureTitle: {
    fontFamily: 'var(--font-display)',
    fontSize: 'clamp(40px, 4.4vw, 56px)',
    fontWeight: 700,
    lineHeight: 1.05,
    letterSpacing: '-0.025em',
    color: 'var(--ink)',
    margin: 0, textWrap: 'balance',
    fontVariationSettings: "'opsz' 144, 'SOFT' 50",
  },
  featureBody: { fontSize: 16, lineHeight: 1.7, color: 'var(--ink)', textWrap: 'pretty' },
  pullQuote: {
    fontFamily: 'var(--font-display)',
    fontStyle: 'italic',
    fontSize: 24,
    lineHeight: 1.35,
    fontWeight: 400,
    color: 'var(--coral-deep)',
    borderLeft: '3px solid var(--coral)',
    paddingLeft: 20,
    margin: 0,
    textWrap: 'balance',
    fontVariationSettings: "'opsz' 144, 'SOFT' 100",
  },
  /* ---- Trip builder ---- */
  trip: {
    maxWidth: 'var(--container)',
    margin: '120px auto 0',
    padding: '64px var(--gutter)',
    background: 'var(--ink)',
    color: 'var(--paper)',
    borderRadius: 24,
  },
  tripGrid: { display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 56, alignItems: 'center' },
  tripTitle: {
    fontFamily: 'var(--font-display)',
    fontSize: 'clamp(34px, 4vw, 48px)',
    fontWeight: 700,
    letterSpacing: '-0.025em',
    lineHeight: 1.05,
    color: 'var(--paper)',
    margin: '12px 0 16px',
    textWrap: 'balance',
    fontVariationSettings: "'opsz' 144, 'SOFT' 50",
  },
  tripDek: { fontSize: 16, lineHeight: 1.6, color: 'var(--shallow-soft)', maxWidth: 440, textWrap: 'pretty' },
  tripCTA: { marginTop: 24, display: 'inline-flex' },
  timeline: {
    background: 'var(--lagoon-deep)',
    border: '1px solid rgba(127, 183, 181, 0.18)',
    borderRadius: 16,
    padding: 24,
    fontFamily: 'var(--font-mono)',
    fontSize: 12,
    color: 'var(--shallow-soft)',
  },
  tlRow: {
    display: 'grid',
    gridTemplateColumns: '60px 1fr auto',
    gap: 16,
    padding: '12px 0',
    borderBottom: '1px solid rgba(127, 183, 181, 0.08)',
    alignItems: 'center',
  },
  tlDay: { color: 'var(--coral)', fontWeight: 700 },
  tlBody: { color: 'var(--paper)', fontFamily: 'var(--font-ui)', fontSize: 14, fontWeight: 500, letterSpacing: '-0.005em' },
  tlSub: { color: 'var(--shallow)', fontSize: 11, letterSpacing: '0.04em' },
  tlCost: { color: 'var(--paper)', fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 700, fontVariationSettings: "'opsz' 24" },
  /* ---- Vendor pitch ---- */
  vendor: {
    maxWidth: 'var(--container)',
    margin: '120px auto 0',
    padding: '0 var(--gutter)',
    display: 'grid',
    gridTemplateColumns: '1fr 1fr',
    gap: 48,
  },
  vendorLeft: {
    background: 'var(--coral)',
    color: 'var(--paper)',
    padding: '56px 48px',
    borderRadius: 24,
    display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
    minHeight: 460,
  },
  vendorTitle: {
    fontFamily: 'var(--font-display)',
    fontSize: 'clamp(36px, 3.8vw, 44px)',
    fontWeight: 700,
    lineHeight: 1.05,
    letterSpacing: '-0.02em',
    color: 'var(--paper)',
    margin: 0, textWrap: 'balance',
    fontVariationSettings: "'opsz' 144, 'SOFT' 50",
  },
  vendorRight: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 },
  vendorTile: {
    background: 'var(--surface)',
    border: '1px solid var(--rule)',
    borderRadius: 16,
    padding: 24,
    display: 'flex', flexDirection: 'column', gap: 12,
  },
  vendorBigNum: {
    fontFamily: 'var(--font-display)',
    fontSize: 44, fontWeight: 800,
    letterSpacing: '-0.025em',
    lineHeight: 1,
    color: 'var(--ink)',
    fontVariationSettings: "'opsz' 144, 'SOFT' 50",
  },
};

function HeroSection() {
  return (
    <section style={homeStyles.hero} data-screen-label="Hero">
      <div style={homeStyles.heroGrid}>
        <div style={homeStyles.heroLeft}>
          <div style={homeStyles.issueBlock}>
            <span style={homeStyles.issueDot}/>
            <span>Issue 04 · Iruvai 2026 · 26 atolls in stock</span>
          </div>
          <h1 style={homeStyles.heroHead}>
            An atlas <br/>
            <span style={homeStyles.heroHeadAccent}>of everything</span><br/>
            Maldives.
          </h1>
          <p style={homeStyles.heroDek}>
            From Soneva Fushi to a hedhikaa baker on Maafushi.
            From a sunset dhoni in Villingili to thudu kunaa woven by hand in Gaafu Dhaal.
            Every island, every vendor, every season — geocoded, transfer-aware, dual-currency.
          </p>
          <div style={homeStyles.heroByline}>
            <div style={homeStyles.bylineStat}>
              <span style={homeStyles.bylineNum}>14,920</span>
              <span style={homeStyles.bylineLabel}>Listings</span>
            </div>
            <div style={homeStyles.bylineStat}>
              <span style={homeStyles.bylineNum}>2,140</span>
              <span style={homeStyles.bylineLabel}>Vendors</span>
            </div>
            <div style={homeStyles.bylineStat}>
              <span style={homeStyles.bylineNum}>26</span>
              <span style={homeStyles.bylineLabel}>Atolls</span>
            </div>
            <div style={homeStyles.bylineStat}>
              <span style={homeStyles.bylineNum}>USD<span style={{fontSize:14, color:'var(--ink-mute)'}}>/</span>MVR</span>
              <span style={homeStyles.bylineLabel}>Settled</span>
            </div>
          </div>
        </div>

        <div style={{ position: 'relative' }}>
          <div style={homeStyles.heroPhoto}>
            <img
              src="assets/gen/atoll-aerial.png"
              alt="Aerial · Hanifaru Bay · Baa Atoll"
              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
              loading="eager"
            />
            <div style={homeStyles.heroPhotoCaption}>
              <span>04°59'N · 73°02'E</span>
              <span>SHOT BY MOHAMED ALEEM</span>
            </div>
          </div>
          <div style={homeStyles.heroSecondary}>
            <img
              src="assets/gen/dhoni-shipyard.png"
              alt="Dhoni boat · Alifushi shipyard"
              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
              loading="eager"
            />
          </div>
        </div>
      </div>
    </section>
  );
}

function SearchSection() {
  return (
    <section style={homeStyles.searchSection} data-screen-label="Search">
      <div style={homeStyles.searchHead}>
        <div style={homeStyles.searchKicker}>The Universal Search</div>
        <h2 style={homeStyles.searchTitle}>
          One bar for the whole archipelago — <span style={homeStyles.searchTitleAccent}>stay, charter, eat, shop.</span>
        </h2>
      </div>
      <div style={homeStyles.searchWrap}>
        <USearch initial="stay"/>
      </div>
      <div style={homeStyles.searchHint}>
        Try: "Baa atoll · April 12–19 · 2 adults" — we&apos;ll thread the seaplane and the dive boat for you.
      </div>
    </section>
  );
}

function VerticalChooser() {
  return (
    <section style={homeStyles.section}>
      <div style={homeStyles.sectionHead}>
        <div style={homeStyles.sectionLeft}>
          <div style={homeStyles.sectionKicker}>Browse by category</div>
          <h2 style={homeStyles.sectionTitle}>Five marketplaces, one cart.</h2>
          <p style={homeStyles.sectionDek}>Each vertical has its own filters and inventory model — calendar for stays, slot for charters, stock for shop, made-to-order for eat — but a single cart, single payment, single transfer ledger at checkout.</p>
        </div>
      </div>
      <div style={homeStyles.vertGrid}>
        {VERTICALS.map(v => (
          <a key={v.id} href={`prototype-browse.html?v=${v.id}`} style={homeStyles.vertCard}
             onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--ink)'; e.currentTarget.style.background = 'var(--paper)'; }}
             onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--rule)'; e.currentTarget.style.background = 'var(--surface)'; }}>
            <Icon name={v.icon} size={22} color="var(--lagoon)"/>
            <div>
              <div style={homeStyles.vertCount}>{v.count.toLocaleString()}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--ink-mute)', marginTop: 4 }}>
                {v.label}
              </div>
            </div>
            <div style={{ fontSize: 13, color: 'var(--ink-mute)', textWrap: 'balance', lineHeight: 1.45, marginTop: 'auto' }}>{v.sub}</div>
          </a>
        ))}
      </div>
    </section>
  );
}

function InSeasonBanner() {
  return (
    <div style={homeStyles.inSeason}>
      <div style={homeStyles.seasonBox}>
        <div style={homeStyles.seasonLabel}>
          <Icon name="sun" size={16}/> Currently Iruvai
        </div>
        <p style={homeStyles.seasonText}>
          April through May is <em>iruvai</em> — dry season, calm seas on the eastern atolls.
          Best window for Hanifaru Bay mantas (B), tiger sharks at Fuvahmulah, and the sandbank trips out of Maafushi.
        </p>
        <a href="#" className="btn btn-ghost" style={{ height: 38, padding: '0 18px', fontSize: 13 }}>
          Read season guide <Icon name="arrowRight" size={14}/>
        </a>
      </div>
    </div>
  );
}

function StayRail() {
  return (
    <section style={homeStyles.section}>
      <div style={homeStyles.sectionHead}>
        <div style={homeStyles.sectionLeft}>
          <div style={homeStyles.sectionKicker}>Issue 04 · Stay</div>
          <h2 style={homeStyles.sectionTitle}>Where to sleep, in 26 atolls.</h2>
          <p style={homeStyles.sectionDek}>Resort islands, local-island guesthouses, and Hulhumalé apartments — all priced transfer-inclusive so the landed cost matches the booking.</p>
        </div>
        <div style={homeStyles.sectionMeta}>
          <span>2,840 listings</span>
          <a href="prototype-browse.html?v=stay" className="btn btn-ghost" style={{ height: 38, padding: '0 16px', fontSize: 13 }}>See all <Icon name="arrowRight" size={14}/></a>
        </div>
      </div>
      <div style={homeStyles.rail}>
        {STAYS.slice(0, 4).map((s, i) => (
          <StayCard key={s.id} {...s} photo={i === 0 ? 'assets/gen/atoll-aerial.png' : null}/>
        ))}
      </div>
    </section>
  );
}

function CharterRail() {
  return (
    <section style={homeStyles.section}>
      <div style={homeStyles.sectionHead}>
        <div style={homeStyles.sectionLeft}>
          <div style={homeStyles.sectionKicker}>Issue 04 · Charter</div>
          <h2 style={homeStyles.sectionTitle}>The fleet, by the trip.</h2>
          <p style={homeStyles.sectionDek}>Liveaboards by week-long itinerary, sunset dhoni by the hour, big-game charters by the boat. Cabin-or-seat selection happens after you confirm.</p>
        </div>
        <div style={homeStyles.sectionMeta}>
          <span>612 boats &amp; itineraries</span>
          <a href="prototype-browse.html?v=charter" className="btn btn-ghost" style={{ height: 38, padding: '0 16px', fontSize: 13 }}>See all <Icon name="arrowRight" size={14}/></a>
        </div>
      </div>
      <div style={homeStyles.rail3}>
        {CHARTERS.slice(0, 3).map(c => <CharterCard key={c.id} {...c} photo={null}/>)}
      </div>
    </section>
  );
}

function ShopRail() {
  return (
    <section style={homeStyles.section}>
      <div style={homeStyles.sectionHead}>
        <div style={homeStyles.sectionLeft}>
          <div style={homeStyles.sectionKicker}>Issue 04 · Shop</div>
          <h2 style={homeStyles.sectionTitle}>From the workshops &amp; the bodu fihaara.</h2>
          <p style={homeStyles.sectionDek}>Lacquerware turned in Thulhaadhoo. Mats woven on Rasdhoo. Anchor butter from STO. Reef-safe sunscreen from a Malé start-up. We ship by Tuesday's dhoni.</p>
        </div>
        <div style={homeStyles.sectionMeta}>
          <span>9,420 SKUs</span>
          <a href="prototype-browse.html?v=shop" className="btn btn-ghost" style={{ height: 38, padding: '0 16px', fontSize: 13 }}>See all <Icon name="arrowRight" size={14}/></a>
        </div>
      </div>
      <div style={homeStyles.rail}>
        {SHOP.slice(0, 4).map((p, i) => (
          <ShopCard key={p.id} {...p} photo={i === 0 ? 'assets/gen/lacquer-workshop.png' : null}/>
        ))}
      </div>
    </section>
  );
}

function FoodRail() {
  return (
    <section style={homeStyles.section}>
      <div style={homeStyles.sectionHead}>
        <div style={homeStyles.sectionLeft}>
          <div style={homeStyles.sectionKicker}>Issue 04 · Eat</div>
          <h2 style={homeStyles.sectionTitle}>Hedhikaa, cake, fresh tuna.</h2>
          <p style={homeStyles.sectionDek}>Home bakers, restaurant kitchens, fish straight off the dhoni. Ingredient lists auto-derive calories, halal flags, and Ramadan iftar-pre-orders are pinned in March.</p>
        </div>
        <div style={homeStyles.sectionMeta}>
          <span>1,840 dishes</span>
          <a href="prototype-browse.html?v=eat" className="btn btn-ghost" style={{ height: 38, padding: '0 16px', fontSize: 13 }}>See all <Icon name="arrowRight" size={14}/></a>
        </div>
      </div>
      <div style={homeStyles.rail}>
        {FOOD.slice(0, 4).map((f, i) => (
          <FoodCard key={f.id} {...f} photo={i === 0 ? 'assets/gen/hedhikaa-spread.png' : null}/>
        ))}
      </div>
    </section>
  );
}

function EditorialFeature() {
  return (
    <section style={homeStyles.feature} data-screen-label="Editorial">
      <div style={homeStyles.featurePhoto}>
        <img
          src="assets/gen/dhoni-shipyard.png"
          alt="Dhoni shipyard · Alifushi"
          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
          loading="lazy"
        />
      </div>
      <div style={homeStyles.featureCopy}>
        <div style={homeStyles.sectionKicker}>Field report · Alifushi</div>
        <h2 style={homeStyles.featureTitle}>The carpenters in Alifushi still cut every dhoni rib by eye.</h2>
        <p style={homeStyles.featureBody}>
          On the boatyard side of Alifushi — a fifteen-minute speedboat from the airport at Ifuru — the rhythm
          is the same as it was a hundred years ago. A new dhoni starts as a single coconut-trunk keel laid on
          coral-stone blocks. Six men work it for ten weeks; you hear the adze, the saw, the kettle. Twenty-three of
          our charter listings start their lives here, and we wrote up the whole craft so you know what you&apos;re booking.
        </p>
        <blockquote style={homeStyles.pullQuote}>
          "We measure with the eye, with the body. The plans are in the wood."
        </blockquote>
        <div>
          <a href="#" className="btn btn-primary" style={{ background: 'var(--ink)', color: 'var(--paper)' }}>
            Read the field report <Icon name="arrowRight" size={15}/>
          </a>
        </div>
      </div>
    </section>
  );
}

function AtollMapSection() {
  return (
    <section style={homeStyles.section}>
      <AtollMap/>
    </section>
  );
}

function TripBuilder() {
  return (
    <section style={homeStyles.trip} data-screen-label="Trip Builder">
      <div style={homeStyles.tripGrid}>
        <div>
          <div style={{ ...homeStyles.sectionKicker, color: 'var(--coral)' }}>The Trip Builder · beta</div>
          <h2 style={homeStyles.tripTitle}>Thread your transfers — we&apos;ll do the math.</h2>
          <p style={homeStyles.tripDek}>
            Pick a guesthouse in Baa, a manta dive on Hanifaru, and a final night in Hulhumalé.
            Malzive routes the seaplane window, the speedboat hand-off, and the airport return — and gives
            you one landed price in your currency. No global player can do this without partnering, because
            the inventory only exists here.
          </p>
          <div style={homeStyles.tripCTA}>
            <a href="#" className="btn btn-coral">Open the builder <Icon name="arrowRight" size={15}/></a>
          </div>
        </div>
        <div style={homeStyles.timeline}>
          <div style={{ ...homeStyles.tlRow, borderTop: '1px solid rgba(127, 183, 181, 0.08)' }}>
            <span style={homeStyles.tlDay}>Day 1</span>
            <div>
              <div style={homeStyles.tlBody}>VIA seaplane → Soneva Fushi · Baa Atoll</div>
              <div style={homeStyles.tlSub}>Arrives 14:20 · Window 12:00–17:00</div>
            </div>
            <span style={homeStyles.tlCost}>$420</span>
          </div>
          <div style={homeStyles.tlRow}>
            <span style={homeStyles.tlDay}>D 2–4</span>
            <div>
              <div style={homeStyles.tlBody}>Soneva Fushi · Water Villa · Half Board</div>
              <div style={homeStyles.tlSub}>3 nights · Free cancel until Apr 2</div>
            </div>
            <span style={homeStyles.tlCost}>$6,450</span>
          </div>
          <div style={homeStyles.tlRow}>
            <span style={homeStyles.tlDay}>Day 4</span>
            <div>
              <div style={homeStyles.tlBody}>Hanifaru Bay manta dive · Princess Haleema</div>
              <div style={homeStyles.tlSub}>Half-day from Soneva jetty · OWD+</div>
            </div>
            <span style={homeStyles.tlCost}>$185</span>
          </div>
          <div style={homeStyles.tlRow}>
            <span style={homeStyles.tlDay}>D 5</span>
            <div>
              <div style={homeStyles.tlBody}>Seaplane → Hulhumalé · Reef View 2BR</div>
              <div style={homeStyles.tlSub}>1 night · Airport runway side</div>
            </div>
            <span style={homeStyles.tlCost}>$554</span>
          </div>
          <div style={{ ...homeStyles.tlRow, borderBottom: 'none', paddingTop: 18, marginTop: 4, borderTop: '1px solid rgba(127, 183, 181, 0.4)' }}>
            <span style={{...homeStyles.tlDay, color:'var(--shallow)'}}>TOTAL</span>
            <div>
              <div style={{ ...homeStyles.tlBody, color: 'var(--paper)' }}>5 nights · 2 adults · all transfers</div>
              <div style={homeStyles.tlSub}>incl. TGST 16% · Green Tax · Bed Tax</div>
            </div>
            <span style={{...homeStyles.tlCost, fontSize:22, color:'var(--coral)'}}>$7,609</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function VendorPitch() {
  return (
    <section style={homeStyles.vendor} data-screen-label="Vendor Pitch">
      <div style={homeStyles.vendorLeft}>
        <div>
          <div style={{ ...homeStyles.sectionKicker, color: 'rgba(255,255,255,0.7)' }}>For Vendors</div>
          <h2 style={homeStyles.vendorTitle}>Sell what your island makes. Anywhere it ships.</h2>
        </div>
        <p style={{ fontSize: 16, lineHeight: 1.55, color: 'rgba(255,255,255,0.92)', maxWidth: 380, textWrap: 'pretty' }}>
          One vendor account covers a guesthouse, a sunset dhoni, a hedhikaa kitchen, and a lacquer
          workshop. Calendar inventory, slot inventory, stock SKUs, and made-to-order — all from the same dashboard.
          BML, m-Faisaa, Dhiraagu Pay, FahiPay, COD. We settle in MVR or USD, weekly.
        </p>
        <a href="prototype-onboarding.html" className="btn" style={{ background: 'var(--paper)', color: 'var(--coral-deep)', alignSelf: 'flex-start' }}>
          Start vendor sign-up <Icon name="arrowRight" size={15}/>
        </a>
      </div>
      <div style={homeStyles.vendorRight}>
        <div style={homeStyles.vendorTile}>
          <div style={homeStyles.vendorBigNum}>4.2%</div>
          <div style={{ fontSize: 14, fontWeight: 600 }}>Marketplace fee</div>
          <div style={{ fontSize: 13, color: 'var(--ink-mute)', lineHeight: 1.5 }}>Half of Booking.com (15%) for accommodations. Flat for retail. Zero for first 90 days.</div>
        </div>
        <div style={homeStyles.vendorTile}>
          <div style={homeStyles.vendorBigNum}>72h</div>
          <div style={{ fontSize: 14, fontWeight: 600 }}>From signup to live listing</div>
          <div style={{ fontSize: 13, color: 'var(--ink-mute)', lineHeight: 1.5 }}>Verified by MIRA tax ID + business registration. Faster for guesthouses with prior reviews.</div>
        </div>
        <div style={homeStyles.vendorTile}>
          <div style={homeStyles.vendorBigNum}>26<span style={{fontSize:24, color:'var(--ink-mute)'}}>/26</span></div>
          <div style={{ fontSize: 14, fontWeight: 600 }}>Atolls served by cargo dhoni</div>
          <div style={{ fontSize: 13, color: 'var(--ink-mute)', lineHeight: 1.5 }}>We ingest the weekly schedule from MTCC and 14 private operators. Shipping ETAs are honest.</div>
        </div>
        <div style={homeStyles.vendorTile}>
          <div style={homeStyles.vendorBigNum}>2.4×</div>
          <div style={{ fontSize: 14, fontWeight: 600 }}>Ramadan iftar pre-order lift</div>
          <div style={{ fontSize: 13, color: 'var(--ink-mute)', lineHeight: 1.5 }}>For home bakers and hedhikaa kitchens, vs. WhatsApp-only ordering. (Pilot data, March 2026.)</div>
        </div>
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <div data-screen-label="Homepage">
      <SiteHeader/>
      <HeroSection/>
      <SearchSection/>
      <VerticalChooser/>
      <InSeasonBanner/>
      <StayRail/>
      <AtollMapSection/>
      <CharterRail/>
      <EditorialFeature/>
      <ShopRail/>
      <FoodRail/>
      <TripBuilder/>
      <VendorPitch/>
      <SiteFooter/>
    </div>
  );
}

Object.assign(window, { HomePage });