// ====================================================
// SECTION 1 — Hero (responsive, real scrollable site)
// ====================================================

function S1Logo({ height = 38 }) {
  return (
    <img
      src="assets/logo-yojea.webp"
      alt="Yojea"
      style={{ height, width: 'auto', display: 'block' }}
    />
  );
}

// ─── Global sticky nav ────────────────────────────────────────
// Fixed to the top of the viewport, lives OUTSIDE of HeroSection so
// it persists across the entire page. Tracks which section is in view
// via IntersectionObserver and highlights the matching nav item.
const NAV_ITEMS = [
  { label: 'Bahan',     id: 'ingredients' },
  { label: 'Tentang',   id: 'tentang' },
  { label: 'Manfaat',   id: 'manfaat' },
  { label: 'Uji Lab',   id: 'lab' },
  { label: 'Testimoni', id: 'testimoni' },
  { label: 'FAQ',       id: 'faq' },
];

// Smooth-scroll helper. Most ids resolve to the section's top (with a
// 72px nav offset). Two special targets get custom destinations:
//   • 'beli'  → phase 5 of #story (the Beli Yojea finale block)
//   • 'manfaat' → top of #manfaat — already correct, but we round down
//     to land before the sachet animation kicks in.
function smoothScrollToId(id) {
  if (id === 'beli') {
    const story = document.getElementById('story');
    if (story) {
      // Land in the stable "fully-left" zone: the photo finishes its
      // leftward sweep at progress≈0.954 and the phase-4 cert text has
      // faded out by ≈0.94, so 0.96 shows the photo fully moved left with
      // no phase-4 text — while the section is still pinned (not at 1.0).
      const total = story.offsetHeight - window.innerHeight;
      const top = story.getBoundingClientRect().top + window.scrollY
                + Math.max(0, total) * 0.96;
      window.scrollTo({ top, behavior: 'smooth' });
      return;
    }
  }
  const el = document.getElementById(id);
  if (!el) return;
  const top = el.getBoundingClientRect().top + window.scrollY - 72;
  window.scrollTo({ top, behavior: 'smooth' });
}

function TopNav() {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  const [active, setActive] = React.useState('hero');

  // Solidify nav background once user has scrolled past the very top
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Track which section is in view (incl. "hero" so nothing highlights
  // while at the very top of the page).
  React.useEffect(() => {
    const ids = ['hero', ...NAV_ITEMS.map(n => n.id)];
    const els = ids
      .map(id => document.getElementById(id))
      .filter(Boolean);
    if (!els.length) return;

    // For each section, fire when its center is near the viewport center.
    // We keep a sorted map of intersection ratios and pick the largest.
    const ratios = new Map();
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => ratios.set(e.target.id, e.intersectionRatio));
      let best = 'hero', bestR = 0;
      ratios.forEach((r, id) => { if (r > bestR) { bestR = r; best = id; } });
      if (bestR > 0) setActive(best);
    }, {
      // Section is "active" once its middle band overlaps the viewport
      rootMargin: '-40% 0px -50% 0px',
      threshold: [0, 0.01, 0.25, 0.5, 0.75, 1],
    });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  const handleClick = (e, id) => {
    e.preventDefault();
    setOpen(false);
    smoothScrollToId(id);
  };

  return (
    <nav className={'topnav' + (scrolled ? ' is-scrolled' : '') + (open ? ' is-open' : '')}>
      <a href="#hero" onClick={(e) => handleClick(e, 'hero')} className="topnav-logo">
        <S1Logo height={32} />
      </a>

      <div className="topnav-links">
        {NAV_ITEMS.map(item => (
          <a
            key={item.id}
            href={'#' + item.id}
            onClick={(e) => handleClick(e, item.id)}
            className={'topnav-link' + (active === item.id ? ' is-active' : '')}
          >
            <span className="topnav-link-text">{item.label}</span>
            <span className="topnav-link-dot" aria-hidden="true" />
          </a>
        ))}
      </div>

      <a
        href="#beli"
        onClick={(e) => handleClick(e, 'beli')}
        className="topnav-cta"
      >
        Beli Sekarang
        <svg width="12" height="12" viewBox="0 0 14 14" fill="none" aria-hidden="true">
          <path d="M3 7h8m0 0L7 3m4 4L7 11" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </a>

      <button className="topnav-burger" onClick={() => setOpen(!open)} aria-label="Menu" aria-expanded={open}>
        <span /><span /><span />
      </button>

      {/* Mobile drawer */}
      <div className="topnav-drawer" aria-hidden={!open}>
        {NAV_ITEMS.map(item => (
          <a
            key={item.id}
            href={'#' + item.id}
            onClick={(e) => handleClick(e, item.id)}
            className={'topnav-drawer-link' + (active === item.id ? ' is-active' : '')}
          >
            {item.label}
          </a>
        ))}
        <a
          href="#beli"
          onClick={(e) => handleClick(e, 'beli')}
          className="topnav-drawer-cta"
        >
          Beli Sekarang →
        </a>
      </div>
    </nav>
  );
}

function S1Grain() {
  return (
    <svg className="s1-grain" aria-hidden="true">
      <filter id="s1grainFilter">
        <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2"/>
        <feColorMatrix values="0 0 0 0 0.12   0 0 0 0 0.09   0 0 0 0 0.07   0 0 0 1 0"/>
      </filter>
      <rect width="100%" height="100%" filter="url(#s1grainFilter)"/>
    </svg>
  );
}

function HeroSection() {
  // ─── Cycling testimonial pop-ups around the photo ────────────
  // We rotate through a small set of KEPUTIHAN-focused testimonials,
  // surfacing 2 at a time (each slot shows a different one). The card
  // fades + scales in when its index changes; a ~5s interval keeps
  // motion calm.
  //
  // Names are real customer handles (same source list as the Testimoni
  // section), masked: first 2 letters + "*". Quotes are short-form so
  // they fit the small popup card.
  const heroMask = (raw) => {
    const at = raw.startsWith('@') ? '@' : '';
    const body = at ? raw.slice(1) : raw;
    if (!body) return raw;
    const v = body.slice(0, 2);
    return at + v + '*'.repeat(Math.max(0, body.length - v.length));
  };
  const HERO_TESTIS = [
    { name: '@jeanette_lesi', city: 'Pelanggan Yojea', text: 'Keputihan auto berkurang.',        stars: 5 },
    { name: '@jundina_w',     city: 'Pelanggan Yojea', text: '2x minum, ga gatal & keputihan ilang.', stars: 5 },
    { name: '@na.ttto',       city: 'Pelanggan Yojea', text: 'Keputihan jadi lebih bening.',       stars: 5 },
    { name: '@aditamutiara',  city: 'Pelanggan Yojea', text: 'Keputihan jauh berkurang.',          stars: 5 },
    { name: '@tamara',        city: 'Pelanggan Yojea', text: 'Keputihan berkurang, 1 box kerasa.',  stars: 5 },
  ];
  const [tIdx, setTIdx] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTIdx(i => (i + 2) % HERO_TESTIS.length), 5200);
    return () => clearInterval(id);
  }, []);
  const slot1 = HERO_TESTIS[tIdx % HERO_TESTIS.length];
  const slot2 = HERO_TESTIS[(tIdx + 1) % HERO_TESTIS.length];

  return (
    <section className="s1" id="hero">
      <S1Grain />
      {/* Soft animated radial glows behind everything */}
      <div className="s1-aurora" aria-hidden="true">
        <span className="s1-aurora-blob s1-aurora-1" />
        <span className="s1-aurora-blob s1-aurora-2" />
        <span className="s1-aurora-blob s1-aurora-3" />
        <span className="s1-aurora-blob s1-aurora-4" />
      </div>

      <div className="s1-grid">
        {/* LEFT — text column */}
        <div className="s1-text">
          <div className="s1-eyebrow">
            <span className="s1-eyebrow-line" />
            Jamu Modern · Est. 1970
          </div>

          <h1 className="s1-headline">
            <span className="s1-row">
              <span>Beauty</span>
              <em>inside,</em>
            </span>
            <span className="s1-row">
              <span>Beauty</span>
              <em>outside.</em>
            </span>
          </h1>

          <p className="s1-sub">
            Jamu Modern Wanita <strong>No. 1 di Indonesia</strong>. Diformulasikan dari ramuan herbal turun-temurun untuk kesehatan wanita setiap hari.
          </p>

          <div className="s1-cta-row">
            <button
              className="s1-btn-primary"
              onClick={() => smoothScrollToId('beli')}
            >
              Beli Sekarang
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8m0 0L7 3m4 4L7 11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </button>
            <button
              className="s1-btn-ghost"
              onClick={() => smoothScrollToId('tentang')}
            >
              Cerita Yojea
            </button>
          </div>

          <div className="s1-badges">
            <span className="s1-badge"><i/>BPOM Terdaftar</span>
            <span className="s1-badge"><i/>Halal MUI</span>
            <span className="s1-badge"><i/>Uji Lab Terbukti</span>
          </div>
        </div>

        {/* RIGHT — photo column */}
        <div className="s1-photo-wrap">
          <div className="s1-floating-quote">
            <div className="s1-quote-star">★</div>
            <div>
              <div className="s1-quote-big">Ribuan wanita</div>
              <div className="s1-quote-sm">sudah merasakan manfaatnya</div>
            </div>
          </div>

          <div className="s1-floating-ingredients">
            <div className="s1-ing-num">6</div>
            <div>
              <div className="s1-ing-eyebrow">Bahan Alami</div>
              <div className="s1-ing-label">Pilihan Terbaik Indonesia</div>
            </div>
          </div>

          {/* Cycling testimonial pops around the photo */}
          <div className="s1-testi s1-testi-a" key={'a-' + slot1.name}>
            <div className="s1-testi-stars">{'★'.repeat(slot1.stars)}</div>
            <div className="s1-testi-text">"{slot1.text}"</div>
            <div className="s1-testi-meta">
              <span className="s1-testi-name">{heroMask(slot1.name)}</span>
            </div>
          </div>
          <div className="s1-testi s1-testi-b" key={'b-' + slot2.name}>
            <div className="s1-testi-stars">{'★'.repeat(slot2.stars)}</div>
            <div className="s1-testi-text">"{slot2.text}"</div>
            <div className="s1-testi-meta">
              <span className="s1-testi-name">{heroMask(slot2.name)}</span>
            </div>
          </div>

          <img src="assets/hero-woman.webp" alt="Wanita Yojea" className="s1-photo" />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HeroSection, TopNav });