// ============== CASES ==============
function CasesSection() {
  const [idx, setIdx] = React.useState(0);
  const max = Math.max(0, CASES.length - 3);
  const next = () => setIdx(i => Math.min(max, i + 1));
  const prev = () => setIdx(i => Math.max(0, i - 1));
  return (
    <section className="cases" id="cases" data-screen-label="06 Cases">
      <div className="cases__inner">
        <header className="cases__head reveal">
          <div>
            <span className="eyebrow">Selected Work</span>
            <h2 className="h-section" style={{ marginTop: 12 }}>Five stories from a folder of forty-eight.</h2>
          </div>
          <p className="lede">Engagements span seed-stage SaaS, D2C brands, professional services and family offices. Full case studies are available under NDA.</p>
          <div className="cases__nav">
            <button onClick={prev} disabled={idx === 0} aria-label="Previous">←</button>
            <button onClick={next} disabled={idx >= max} aria-label="Next">→</button>
          </div>
        </header>
        <div className="cases__rail-wrap">
          <div className="cases__rail" style={{ transform: `translateX(calc(-${idx} * (100% / 3 + 13px)))` }}>
            {CASES.map((c) => (
              <article key={c.id} className="case">
                <div className="case__media" role="img" aria-label="Architectural photo placeholder">
                  <span className="case__media-tag">[Photograph · {c.sector}]</span>
                </div>
                <div className="case__body">
                  <span className="case__sector">{c.sector} · {c.engagement}</span>
                  <h3 className="case__name">{c.name}</h3>
                  <p className="case__quote">{c.quote}</p>
                  <dl className="case__metrics">
                    {c.metrics.map(([n, l], j) => (
                      <div key={j} className="case__metric">
                        <span className="case__metric-n">{n}</span>
                        <span className="case__metric-l">{l}</span>
                      </div>
                    ))}
                  </dl>
                </div>
              </article>
            ))}
          </div>
        </div>
        <div className="cases__counter">
          <span>{idx + 1}–{Math.min(idx + 3, CASES.length)} of {CASES.length}</span>
          <span>Full case studies under NDA · Request access on consultation</span>
        </div>
      </div>
    </section>
  );
}

// ============== PARTNERS ==============
function Partners() {
  return (
    <section className="partners" id="partners" data-screen-label="07 Partners">
      <div className="partners__inner">
        <header className="partners__head reveal">
          <div>
            <span className="eyebrow eyebrow--dark">The Ones We Build Alongside</span>
            <h2 className="h-section h-section--dark" style={{ marginTop: 12 }}>Founders who trust us with their operations.</h2>
          </div>
          <p className="lede lede--dark">Across twelve sectors, from pre-seed to Series B, founders return to us when they need a single team that ships.</p>
        </header>
        <div className="partners__stats">
          <div><span className="pstat__n">48</span><span className="pstat__l">Active engagements</span></div>
          <div><span className="pstat__n">12</span><span className="pstat__l">Sectors served</span></div>
          <div><span className="pstat__n">96%</span><span className="pstat__l">Retention, year one</span></div>
        </div>
        <ul className="partners__grid">
          {PARTNERS.map((p, i) => (
            <li key={p.name} className="plogo">
              <span className="plogo__num">{String(i + 1).padStart(2, '0')}</span>
              <span className="plogo__name">{p.name}</span>
              <span className="plogo__sector">{p.sector}</span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

// ============== ABOUT ==============
function About() {
  return (
    <section className="about" id="about" data-screen-label="08 About">
      <div className="about__inner">
        <header className="about__head reveal">
          <span className="eyebrow">About Rasika &amp; Co.</span>
          <h2 className="h-section" style={{ marginTop: 12 }}>A consultancy built like the businesses we build.</h2>
        </header>
        <div className="about__grid reveal">
          <div className="about__col">
            <span className="eyebrow">Vision</span>
            <p className="about__text">To be the globally recognised, indispensable partner that empowers every visionary leader — from founders to executives — to transform their ideas into a thriving, self-sustaining, high-impact enterprise.</p>
          </div>
          <div className="about__col">
            <span className="eyebrow">Mission</span>
            <p className="about__text">Deliver a comprehensive operational platform integrating expertise across <strong>Establish</strong>, <strong>Scale</strong>, and <strong>Optimise</strong> — enabling businesses to minimise administrative burden, achieve rapid scale, and sustain long-term business health.</p>
          </div>
          <div className="about__col">
            <span className="eyebrow">Philosophy</span>
            <p className="about__text">Whether you're sketching an idea on a napkin, landing your first 100 customers, or scaling your operations — <strong>we are the team by your side.</strong></p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============== PERKS ==============
function Perks() {
  return (
    <section className="perks" id="perks" data-screen-label="09 Perks">
      <div className="perks__inner">
        <header className="perks__head reveal">
          <span className="eyebrow">More Than Just Services</span>
          <h2 className="h-section" style={{ marginTop: 12 }}>Partnering with us comes with extras.</h2>
        </header>
        <ul className="perks__list reveal">
          {PERKS.map(([t, d], i) => (
            <li key={t} className="perk">
              <span className="perk__num">{String(i + 1).padStart(2, '0')}</span>
              <h4 className="perk__t">{t}</h4>
              <p className="perk__d">{d}</p>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

// ============== CONTACT ==============
function Contact() {
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', email: '', stage: 'Napkin sketch', pkg: 'Not sure yet', message: '' });
  const [errors, setErrors] = React.useState({});

  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

  const submit = (e) => {
    e.preventDefault();
    const errs = {};
    if (!form.name.trim()) errs.name = 'Required';
    if (!form.email.trim()) errs.email = 'Required';
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) errs.email = 'Invalid email';
    if (!form.message.trim() || form.message.trim().length < 10) errs.message = 'A line or two, please';
    setErrors(errs);
    if (Object.keys(errs).length === 0) setSent(true);
  };

  return (
    <section className="contact" id="contact" data-screen-label="10 Contact">
      <div className="contact__inner">
        <div className="contact__grid">
          <div className="reveal">
            <span className="eyebrow eyebrow--dark">Book a Consultation</span>
            <h2 className="contact__title">Let's talk about what you're building.</h2>
            <div className="contact__meta">
              <div className="contact__meta-row"><span className="contact__meta-lbl">Write to</span><a href="mailto:hello@rasika.space" className="contact__link">hello@rasika.space</a></div>
              <div className="contact__meta-row"><span className="contact__meta-lbl">Visit</span><span className="contact__addr">Rasika &amp; Co. · Pune · Mumbai · Remote</span></div>
              <div className="contact__meta-row"><span className="contact__meta-lbl">Response time</span><span className="contact__addr">Within 48 hours</span></div>
            </div>
          </div>

          <form className="contact__form reveal" onSubmit={submit} noValidate>
            {sent ? (
              <div className="contact__thanks">
                <span className="eyebrow eyebrow--dark">Received</span>
                <h3 className="thanks__h">Noted, {form.name.split(' ')[0] || 'friend'}. We'll be in touch within 48 hours.</h3>
                <button type="button" className="btn btn--ghost-dark" onClick={() => { setSent(false); setForm({ name: '', email: '', stage: 'Napkin sketch', pkg: 'Not sure yet', message: '' }); }}>Send another →</button>
              </div>
            ) : (
              <>
                <div className={`field ${errors.name ? 'field--err' : ''}`}>
                  <label>Your name</label>
                  <input value={form.name} onChange={set('name')} placeholder="Ananya Sharma" />
                  {errors.name && <span className="field__err">{errors.name}</span>}
                </div>
                <div className={`field ${errors.email ? 'field--err' : ''}`}>
                  <label>Business email</label>
                  <input type="email" value={form.email} onChange={set('email')} placeholder="you@company.co" />
                  {errors.email && <span className="field__err">{errors.email}</span>}
                </div>
                <div className="field">
                  <label>Stage</label>
                  <select value={form.stage} onChange={set('stage')}>
                    <option>Napkin sketch</option>
                    <option>Pre-launch</option>
                    <option>First customers</option>
                    <option>Scaling ops</option>
                  </select>
                </div>
                <div className="field">
                  <label>Package of interest</label>
                  <select value={form.pkg} onChange={set('pkg')}>
                    {['Launchpad','Accelerator','Scale & Manage','Branding & Identity','Tech Essentials','Marketing Automation','Investor Readiness','Not sure yet'].map(o => <option key={o}>{o}</option>)}
                  </select>
                </div>
                <div className={`field field--full ${errors.message ? 'field--err' : ''}`}>
                  <label>What should we know?</label>
                  <textarea rows="3" value={form.message} onChange={set('message')} placeholder="A couple of lines about your venture, your ask, and your timeline." />
                  {errors.message && <span className="field__err">{errors.message}</span>}
                </div>
                <button type="submit" className="btn btn--primary btn--full">Send request <span className="arrow">→</span></button>
              </>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

// ============== FOOTER ==============
function Footer({ onNavigate }) {
  return (
    <footer className="footer">
      <div className="footer__inner">
        <div className="footer__col">
          <img src="assets/logo.png" alt="Rasika & Co." className="footer__logo" />
          <p className="footer__tag">Establish · Scale · Optimize</p>
          <p className="footer__copy">© 2026 Rasika &amp; Co. All rights reserved.</p>
        </div>
        <div className="footer__col">
          <span className="footer__col-h">Services</span>
          <ul>
            <li onClick={() => onNavigate('services')}>Establish</li>
            <li onClick={() => onNavigate('services')}>Scale</li>
            <li onClick={() => onNavigate('services')}>Optimize</li>
            <li onClick={() => onNavigate('packages')}>All packages</li>
          </ul>
        </div>
        <div className="footer__col">
          <span className="footer__col-h">Company</span>
          <ul>
            <li onClick={() => onNavigate('about')}>About</li>
            <li onClick={() => onNavigate('process')}>Process</li>
            <li onClick={() => onNavigate('cases')}>Case studies</li>
            <li onClick={() => onNavigate('contact')}>Contact</li>
          </ul>
        </div>
        <div className="footer__col">
          <span className="footer__col-h">Elsewhere</span>
          <ul><li>rasika.space</li><li>LinkedIn</li><li>Instagram</li></ul>
        </div>
      </div>
      <div className="footer__strip">
        <span>Built in Pune — operated everywhere.</span>
        <span>hello@rasika.space</span>
      </div>
    </footer>
  );
}

window.CasesSection = CasesSection;
window.Partners = Partners;
window.About = About;
window.Perks = Perks;
window.Contact = Contact;
window.Footer = Footer;