// ============== NAV ==============
function NavBar({ current, onNavigate }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [
    { id: 'services', label: 'Services', kind: 'scroll' },
    { id: 'process', label: 'Process', kind: 'scroll' },
    { id: 'packages', label: 'Packages', kind: 'link', href: 'Packages.html' },
    { id: 'cases', label: 'Work', kind: 'scroll' },
    { id: 'about', label: 'About', kind: 'scroll' },
    { id: 'contact', label: 'Contact', kind: 'link', href: 'Contact.html' },
  ];
  return (
    <header className={`nav ${scrolled ? 'nav--scrolled' : ''}`}>
      <div className="nav__inner">
        <a href="#home" onClick={(e) => { e.preventDefault(); onNavigate('home'); }} className="nav__brand">
          <img src="assets/logo.png" alt="Rasika & Co." />
        </a>
        <nav className="nav__links">
          {links.map(l => l.kind === 'link'
            ? <a key={l.id} href={l.href} className={`nav__link ${current === l.id ? 'is-active' : ''}`}>{l.label}</a>
            : <button key={l.id} className={`nav__link ${current === l.id ? 'is-active' : ''}`} onClick={() => onNavigate(l.id)}>{l.label}</button>
          )}
        </nav>
        <div className="nav__cta">
          <a href="Contact.html" className="btn btn--primary">
            Book a Consultation <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </header>
  );
}

// ============== RAILBAR — removed (clean consultancy site) ==============
function RailBar() { return null; }

// ============== HERO ==============
function Hero({ onNavigate, variant = 'split' }) {
  const cls = `hero hero--${variant}`;
  const title = "We partner with founders to build, scale, and run their businesses.";
  const lede = "From the first napkin sketch to your hundredth hire, Rasika & Co. is your operational partner — an integrated team across legal, brand, technology, marketing and finance.";

  const cta = (
    <div className="hero__cta">
      <button className="btn btn--primary" onClick={() => onNavigate('contact')}>Book a Consultation <span className="arrow">→</span></button>
      <button className="btn btn--ghost" onClick={() => onNavigate('packages')}>Explore Packages</button>
    </div>
  );

  const top = (
    <div className="hero__top">
      <span className="eyebrow">Operations Consultancy · Est. 2024</span>
      <span className="hero__pulse">Accepting Q2 2026 engagements</span>
    </div>
  );

  if (variant === 'split') {
    return (
      <section className={cls} id="home" data-screen-label="01 Hero">
        <div className="hero__inner">
          {top}
          <div className="hero__split">
            <div>
              <h1 className="hero__title">{title}</h1>
              <p className="lede hero__lede">{lede}</p>
              {cta}
            </div>
            <div className="hero__image" role="img" aria-label="Architectural photo placeholder">
              <span className="hero__image-tag">[Architectural photograph]</span>
            </div>
          </div>
          <div className="hero__strip">
            <div className="strip__cell"><span className="strip__num">01</span><span className="strip__lbl">Establish</span><span className="strip__desc">Legal · Brand · MVP · Financial setup</span></div>
            <div className="strip__cell"><span className="strip__num">02</span><span className="strip__lbl">Scale</span><span className="strip__desc">Performance · SEO · PR · CRM</span></div>
            <div className="strip__cell"><span className="strip__num">03</span><span className="strip__lbl">Optimize</span><span className="strip__desc">Outsourced ops · Finance · Support</span></div>
          </div>
        </div>
      </section>
    );
  }

  if (variant === 'centered') {
    return (
      <section className={cls} id="home" data-screen-label="01 Hero">
        <div className="hero__inner">
          {top}
          <h1 className="hero__title">{title}</h1>
          <p className="lede hero__lede">{lede}</p>
          {cta}
          <div className="hero__strip">
            <div className="strip__cell"><span className="strip__num">01</span><span className="strip__lbl">Establish</span><span className="strip__desc">Legal · Brand · MVP · Financial setup</span></div>
            <div className="strip__cell"><span className="strip__num">02</span><span className="strip__lbl">Scale</span><span className="strip__desc">Performance · SEO · PR · CRM</span></div>
            <div className="strip__cell"><span className="strip__num">03</span><span className="strip__lbl">Optimize</span><span className="strip__desc">Outsourced ops · Finance · Support</span></div>
          </div>
        </div>
      </section>
    );
  }

  // asym
  return (
    <section className={cls} id="home" data-screen-label="01 Hero">
      <div className="hero__inner">
        {top}
        <h1 className="hero__title">{title}</h1>
        <div className="hero__foot">
          <p className="lede hero__lede">{lede}</p>
          {cta}
        </div>
        <div className="hero__strip">
          <div className="strip__cell"><span className="strip__num">01</span><span className="strip__lbl">Establish</span><span className="strip__desc">Legal · Brand · MVP · Financial setup</span></div>
          <div className="strip__cell"><span className="strip__num">02</span><span className="strip__lbl">Scale</span><span className="strip__desc">Performance · SEO · PR · CRM</span></div>
          <div className="strip__cell"><span className="strip__num">03</span><span className="strip__lbl">Optimize</span><span className="strip__desc">Outsourced ops · Finance · Support</span></div>
        </div>
      </div>
    </section>
  );
}

// ============== STATS BAR (replaces IndexStrip) ==============
function IndexStrip() {
  return (
    <div className="statsbar">
      <div className="statsbar__inner">
        <div className="stat"><span className="stat__n">48</span><span className="stat__l">Active engagements</span></div>
        <div className="stat"><span className="stat__n">12</span><span className="stat__l">Sectors served</span></div>
        <div className="stat"><span className="stat__n">96%</span><span className="stat__l">Year-one retention</span></div>
        <div className="stat"><span className="stat__n">48h</span><span className="stat__l">Average response time</span></div>
      </div>
    </div>
  );
}

// ============== MANIFESTO ==============
function Manifesto() {
  return (
    <section className="manifesto" id="manifesto" data-screen-label="02 Manifesto">
      <div className="manifesto__inner reveal">
        <span className="eyebrow eyebrow--dark">Why we exist</span>
        <p className="manifesto__quote">
          Every business faces unique challenges — from legal formalities and product launches to growth bottlenecks and operational overload. <span className="manifesto__accent">That's why we exist.</span>
        </p>
        <div className="manifesto__sig">
          <div>
            <div className="sig__name">The Rasika &amp; Co. team</div>
            <div className="sig__role">Operators, strategists, designers, engineers</div>
          </div>
          <div className="sig__counter">
            <span className="counter__num">03</span>
            <span className="counter__lbl">Pillars of practice</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============== SERVICES ==============
function ServicesSection() {
  const [open, setOpen] = React.useState('establish');
  const pillar = SERVICE_PILLARS.find(p => p.id === open);
  return (
    <section className="services" id="services" data-screen-label="03 Services">
      <div className="services__inner">
        <header className="services__head reveal">
          <div>
            <span className="eyebrow">The Ecosystem</span>
            <h2 className="h-section" style={{ marginTop: 12 }}>One team. Three pillars. Every stage of your journey.</h2>
          </div>
          <p className="lede services__head-right">A single point of accountability across every operational discipline a founder needs — so you spend more time building, and less time managing vendors.</p>
        </header>
        <div className="services__switcher reveal">
          {SERVICE_PILLARS.map(p => (
            <button key={p.id} className={`pillar ${open === p.id ? 'pillar--open' : ''}`} onClick={() => setOpen(p.id)}>
              <span className="pillar__num">{p.num} — Pillar</span>
              <span className="pillar__title">{p.title}</span>
              <span className="pillar__sub">{p.sub}</span>
            </button>
          ))}
        </div>
        <div className="services__detail" key={pillar.id}>
          <div>
            <span className="eyebrow">{pillar.title}</span>
            <p className="lede" style={{ marginTop: 16 }}>{pillar.desc}</p>
          </div>
          <ul className="detail__list">
            {pillar.items.map((it, i) => (
              <li key={i} className="detail__item">
                <span className="detail__check">✓</span>
                <span>{it}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

// ============== PROCESS ==============
function ProcessSection() {
  return (
    <section className="process" id="process" data-screen-label="04 Process">
      <div className="process__inner">
        <header className="process__head reveal">
          <div>
            <span className="eyebrow">How We Work</span>
            <h2 className="h-section" style={{ marginTop: 12 }}>A five-step engagement. No surprises after the contract.</h2>
          </div>
          <p className="lede process__head-right">Every founder we work with sees the same five steps. The shape doesn't change — only the depth, the tools, and the team behind each one.</p>
        </header>
        <div className="process__track">
          {PROCESS.map((s) => (
            <div key={s.num} className="step">
              <span className="step__num">{s.num}</span>
              <h3 className="step__name">{s.name}</h3>
              <p className="step__desc">{s.desc}</p>
              <span className="step__when">{s.when}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============== PACKAGES ==============
function PackagesSection({ onOpen }) {
  const [tier, setTier] = React.useState('All');
  const filters = ['All', 'Establish', 'Scale', 'Optimize'];
  const visible = tier === 'All' ? PACKAGES : PACKAGES.filter(p => p.tier === tier);
  return (
    <section className="packages" id="packages" data-screen-label="05 Packages">
      <div className="packages__inner">
        <header className="packages__head reveal">
          <div>
            <span className="eyebrow">Engagements</span>
            <h2 className="h-section" style={{ marginTop: 12 }}>Seven packages. One for every stage.</h2>
          </div>
          <p className="lede packages__head-right">Every engagement is scoped to your stage. Pricing is tailored after a brief consultation — because no two founders arrive with the same map.</p>
        </header>
        <div className="packages__filters reveal">
          <span className="filters__label">Filter by pillar</span>
          {filters.map(f => (
            <button key={f} className={`filter ${tier === f ? 'filter--active' : ''}`} onClick={() => setTier(f)}>{f}</button>
          ))}
          <span className="filters__count">Showing {visible.length} of {PACKAGES.length}</span>
        </div>
        <div className="packages__grid">
          {visible.map(p => (
            <article key={p.id} className={`pkg-card ${p.featured ? 'pkg-card--feat' : ''} reveal`}>
              {p.featured && <span className="pkg-card__flag">Featured</span>}
              <header className="pkg-card__head">
                <span className="pkg-card__num">{p.num}</span>
                <span className="pkg-card__tier">{p.tier}</span>
              </header>
              <h3 className="pkg-card__name">{p.name}</h3>
              <span className="pkg-card__tag">{p.tag}</span>
              <p className="pkg-card__blurb">{p.blurb}</p>
              <dl className="pkg-card__meta">
                <div><dt>Timeline</dt><dd>{p.timeline}</dd></div>
                <div><dt>Deliverables</dt><dd>{p.sections.reduce((n, s) => n + s.items.length, 0)} items</dd></div>
              </dl>
              <a className="pkg-card__open" href="Packages.html">View on Packages page <span className="arrow">→</span></a>
            </article>
          ))}
        </div>
        <div className="packages__foot">
          <span className="packages__foot-text">Pricing disclosed on consultation. Quotes within 48 hours.</span>
          <a className="btn btn--primary" href="Contact.html">Request a Quote <span className="arrow">→</span></a>
        </div>
      </div>
    </section>
  );
}

// ============== PACKAGE MODAL ==============
function PackageModal({ pkgId, onClose, onContact }) {
  React.useEffect(() => {
    if (!pkgId) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [pkgId, onClose]);
  if (!pkgId) return null;
  const p = PACKAGES.find(x => x.id === pkgId);
  if (!p) return null;
  return (
    <div className="modal" onClick={onClose}>
      <div className="modal__panel" onClick={(e) => e.stopPropagation()}>
        <button className="modal__close" onClick={onClose} aria-label="Close">×</button>
        <div className="modal__head">
          <span className="eyebrow">{p.tier} · {p.num}</span>
          <h2 className="modal__title">{p.name}</h2>
          <span className="modal__tag">{p.tag}</span>
          <p className="modal__objective">{p.objective}</p>
        </div>
        <div className="modal__body">
          {p.sections.map((s, i) => (
            <section key={i} className="modal__section">
              <h4 className="modal__sh">{s.title}</h4>
              <ul className="modal__list">
                {s.items.map((it, j) => <li key={j}><span className="dot">—</span>{it}</li>)}
              </ul>
            </section>
          ))}
        </div>
        <div className="modal__foot">
          <div>
            <span className="eyebrow eyebrow--muted">Timeline</span>
            <span className="modal__tl">{p.timeline}</span>
          </div>
          <div className="modal__cta">
            <button className="btn btn--ghost" onClick={onClose}>Close</button>
            <button className="btn btn--primary" onClick={() => { onClose(); onContact(); }}>Request a Quote <span className="arrow">→</span></button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.NavBar = NavBar;
window.RailBar = RailBar;
window.Hero = Hero;
window.IndexStrip = IndexStrip;
window.Manifesto = Manifesto;
window.ServicesSection = ServicesSection;
window.ProcessSection = ProcessSection;
window.PackagesSection = PackagesSection;
window.PackageModal = PackageModal;