// Trust strip, Problem→Solution, Features, Stats, Audiences, Pricing preview, CTA
/* TRUST STRIP — commented out
const TrustStrip = () => (
  <section className="trust">
    <div className="wrap">
      <div className="trust-label">Built for Karachi's schools — from neighbourhood montessoris to sprawling academies</div>
      <div className="trust-logos">
        {['THE OAK ACADEMY', 'GREENFIELD', 'CRESCENT MONTESSORI', 'BAYVIEW SCHOOL', 'AL-FURQAN', 'NORTHBROOK'].map((n, i) => (
          <div key={i} className="trust-logo">
            <span className="trust-mark" style={{ background: ['#e8798e','#e8a94a','#3f8cab','#f4ead5','#e8a94a','#3f8cab'][i] }}></span>
            {n}
          </div>
        ))}
      </div>
    </div>
  </section>
);
*/

// Problem → Solution with scroll reveal
const Problem = () => {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const obs = new IntersectionObserver(e => e[0].isIntersecting && setVisible(true), { threshold: 0.2 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  const problems = [
    { old: "WhatsApp chaos", new: "One calm feed", color: 'coral' },
    { old: "Cash & bank runs", new: "One-tap payments", color: 'mustard' },
    { old: "Missed homework", new: "Gentle reminders", color: 'teal' },
    { old: "Term-end-only updates", new: "Daily moments", color: 'cream' },
  ];

  return (
    <section className="problem" id="why" ref={ref}>
      <div className="wrap">
        <div className="problem-head">
          <div className="eyebrow">The gap we close</div>
          <h2 className="section-title">Schools deliver excellence.<br />But parents still feel <em>left out.</em></h2>
          <p className="section-lede">
            You know the drill. Five groups, endless emails, multiple online classrooms, a missed fee
            reminder, a blurry photo someone forwarded twice. School Connect
            replaces all of it with a single, warm line between home and school.
          </p>
        </div>

        <div className={`problem-grid ${visible ? 'in' : ''}`}>
          {problems.map((p, i) => (
            <div key={i} className="problem-card" style={{ transitionDelay: `${i * 80}ms` }}>
              <div className="p-old">
                <svg viewBox="0 0 20 20" width="14"><path d="M5 5 L15 15 M15 5 L5 15" stroke="currentColor" strokeWidth="2" strokeLinecap="round" /></svg>
                {p.old}
              </div>
              <div className={`p-arrow ${p.color}`}>
                <svg viewBox="0 0 40 8" width="40"><path d="M2 4 L38 4 M32 1 L38 4 L32 7" stroke="currentColor" fill="none" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </div>
              <div className={`p-new ${p.color}`}>{p.new}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// Features grid — 14+ features with warm card treatment
const Features = () => {
  const [expanded, setExpanded] = React.useState(false);
  const isMobile = typeof window !== 'undefined' && window.innerWidth <= 600;
  const features = [
    { icon: 'fee', title: 'One-tap fee payments', desc: 'Secure online payment, instant receipts. Never another bank run.', color: 'mustard' },
    { icon: 'homework', title: 'Homework uploads', desc: 'Teachers post in seconds. Parents see it instantly, with attachments.', color: 'coral' },
    { icon: 'gallery', title: 'Activity gallery', desc: 'Classroom moments — safely shared only with the right families.', color: 'teal' },
    { icon: 'announce', title: 'Announcements', desc: 'Controlled school-wide or class-specific updates in one feed.', color: 'coral' },
    { icon: 'bell', title: 'Reminders & alerts', desc: 'Smart nudges for homework, fees, events — set by parents too.', color: 'mustard' },
    { icon: 'calendar', title: 'Annual calendar', desc: 'Term dates, holidays, PTMs — always in everyone\u2019s pocket.', color: 'teal' },
    { icon: 'attend', title: 'Attendance', desc: 'Mark in seconds. Parents notified the moment a child is absent.', color: 'cream' },
    { icon: 'progress', title: 'Mood tracking', desc: 'Track your child\u2019s mood and emotional well-being with simple daily check-ins.', color: 'coral' },
    { icon: 'complaint', title: 'Raise a concern', desc: 'Direct, respectful channel straight to school leadership.', color: 'mustard' },
    // { icon: 'chat', title: 'Live chat', desc: 'Private teacher ↔ parent conversations with full history.', color: 'teal' },
    // { icon: 'ai', title: 'AI assistant', desc: 'Answers routine questions 24/7, trained on your school\u2019s policies.', color: 'cream' },
    { icon: 'timetable', title: 'Weekly timetable', desc: 'Every class, every subject — on parents\u2019 and teachers\u2019 phones.', color: 'coral' },
    { icon: 'events', title: 'Events & trips', desc: 'RSVPs, consent forms and payment, handled in a single tap.', color: 'mustard' },
    { icon: 'reports', title: 'Report cards', desc: 'Upload reports in a single tap that parents can access in realtime.', color: 'teal' },
    { icon: 'dash', title: 'Admin dashboard', desc: 'Full operational visibility — fees, enrolment, engagement at a glance.', color: 'cream' },
    { icon: 'notify', title: 'Smart notifications', desc: 'Quiet hours, per-child channels, do-not-disturb. Never noisy.', color: 'coral' },
    { icon: 'dash', title: 'Multi-campus support', desc: 'Branches, shifts, sections — one portal, one bill.', color: 'teal' },
    { icon: 'notify', title: 'Multi-child support', desc: 'Parents with more than one child manage all from a single account — one app, one family.', color: 'mustard' },
  ];

  return (
    <section className="features" id="features">
      <div className="wrap">
        <div className="features-head">
          <div className="eyebrow">The full toolkit</div>
          <h2 className="section-title">Everything a school needs.<br /><em>Nothing it doesn't.</em></h2>
          <p className="section-lede">
            School Connect tools working quietly in the background — so teachers can teach,
            admins can lead, and parents can simply enjoy being parents.
          </p>
        </div>

        <div className="features-grid">
          {(isMobile && !expanded ? features.slice(0, 3) : features).map((f, i) => (
            <FeatureCard key={i} {...f} />
          ))}
        </div>
        {isMobile && !expanded && (
          <div style={{ textAlign: 'center', marginTop: 24 }}>
            <button className="btn btn-ghost" onClick={() => setExpanded(true)}>See all features →</button>
          </div>
        )}
      </div>
    </section>
  );
};

const FeatureCard = ({ icon, title, desc, color }) => {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const obs = new IntersectionObserver(e => e[0].isIntersecting && setVisible(true), { threshold: 0.15 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  return (
    <div ref={ref} className={`feat-card ${visible ? 'in' : ''}`}>
      <div className={`feat-icon ${color}`}>
        <FeatIcon name={icon} />
      </div>
      <div className="feat-title">{title}</div>
      <div className="feat-desc">{desc}</div>
    </div>
  );
};

const FeatIcon = ({ name }) => {
  const common = { width: 22, height: 22, fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const paths = {
    fee: <><rect x="3" y="6" width="18" height="13" rx="2" /><path d="M3 10 L21 10" /><path d="M7 15 L10 15" /></>,
    homework: <><path d="M5 4 L17 4 L19 6 L19 20 L5 20 Z" /><path d="M8 10 L16 10 M8 13 L16 13 M8 16 L13 16" /></>,
    gallery: <><rect x="3" y="4" width="18" height="16" rx="2" /><circle cx="9" cy="10" r="2" /><path d="M3 17 L9 12 L14 16 L18 13 L21 16" /></>,
    announce: <><path d="M4 10 L4 14 L9 14 L16 19 L16 5 L9 10 Z" /><path d="M18 9 Q 20 12, 18 15" /></>,
    bell: <><path d="M6 15 L6 11 Q 6 6, 12 6 Q 18 6, 18 11 L18 15 L20 17 L4 17 Z" /><path d="M10 19 Q 12 21, 14 19" /></>,
    calendar: <><rect x="3" y="5" width="18" height="16" rx="2" /><path d="M3 10 L21 10 M8 3 L8 7 M16 3 L16 7" /></>,
    attend: <><path d="M4 8 L9 13 L20 4" /><path d="M20 12 L20 19 L4 19 L4 12" /></>,
    progress: <><path d="M4 18 L4 10 M10 18 L10 6 M16 18 L16 13" /><path d="M3 20 L21 20" /></>,
    complaint: <><path d="M4 5 L20 5 L20 16 L13 16 L9 20 L9 16 L4 16 Z" /><path d="M12 8 L12 11 M12 13 L12 13.5" /></>,
    // chat: <><path d="M5 5 L19 5 L19 15 L13 15 L9 19 L9 15 L5 15 Z" /><path d="M8 9 L16 9 M8 12 L13 12" /></>,
    ai: <><circle cx="12" cy="12" r="7" /><circle cx="9" cy="10" r="1" /><circle cx="15" cy="10" r="1" /><path d="M9 14 Q 12 16, 15 14" /><path d="M12 3 L12 5 M12 19 L12 21" /></>,
    timetable: <><rect x="3" y="5" width="18" height="16" rx="2" /><path d="M3 10 L21 10 M3 14 L21 14 M9 10 L9 21 M15 10 L15 21" /></>,
    events: <><path d="M12 3 L14 9 L21 9 L15 13 L17 20 L12 16 L7 20 L9 13 L3 9 L10 9 Z" /></>,
    reports: <><path d="M6 3 L16 3 L20 7 L20 21 L6 21 Z" /><path d="M16 3 L16 7 L20 7" /><path d="M9 12 L17 12 M9 15 L17 15 M9 18 L13 18" /></>,
    dash: <><rect x="3" y="3" width="8" height="8" rx="1" /><rect x="13" y="3" width="8" height="5" rx="1" /><rect x="13" y="10" width="8" height="11" rx="1" /><rect x="3" y="13" width="8" height="8" rx="1" /></>,
    notify: <><path d="M12 4 Q 18 4, 18 11 L18 15 L20 17 L4 17 L6 15 L6 11 Q 6 4, 12 4 Z" /><circle cx="18" cy="6" r="3" fill="currentColor" stroke="none" /></>,
    voice: <><rect x="9" y="3" width="6" height="10" rx="3" /><path d="M5 12 Q 5 19, 12 19 Q 19 19, 19 12" /><path d="M12 19 L12 22 M9 22 L15 22" /></>,
    class: <><rect x="2" y="5" width="15" height="12" rx="2" /><path d="M17 9 L22 7 L22 17 L17 15 Z" /></>,
    circles: <><circle cx="9" cy="8" r="3" /><circle cx="17" cy="8" r="3" /><path d="M3 20 Q 3 14, 9 14 Q 13 14, 14 17" /><path d="M11 20 Q 11 14, 17 14 Q 23 14, 23 20" /></>,
    yearbook: <><rect x="4" y="2" width="14" height="18" rx="2" /><path d="M4 6 L18 6" /><circle cx="11" cy="11" r="3" /><path d="M7 17 Q 11 15, 15 17" /></>,
  };
  return <svg viewBox="0 0 24 24" {...common}>{paths[name]}</svg>;
};

// Stats section — animated counters
const Stats = () => {
  const ref = React.useRef(null);
  const [active, setActive] = React.useState(false);
  React.useEffect(() => {
    const obs = new IntersectionObserver(e => e[0].isIntersecting && setActive(true), { threshold: 0.3 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  const stats = [
    { sign: '~', value: 60, suffix: '%', label: 'Less admin time for teachers', sub: 'More hours for teaching, less paperwork', color: 'coral' },
    { sign: '~', value: 85, suffix: '%', label: 'Parent satisfaction increase', sub: 'Informed families are happier families', color: 'mustard' },
    { sign: '~', value: 3, suffix: '×', label: 'Parent engagement rate', sub: 'Weekly touchpoints, not term-end only', color: 'teal' },
    { sign: '~', value: 40, suffix: '%', label: 'Family retention improvement', sub: 'Trust and transparency keep families enrolled', color: 'cream' },
  ];

  return (
    <section className="stats" ref={ref}>
      <div className="wrap">
        <div className="stats-head">
          <div className="eyebrow">The difference it makes</div>
          <h2 className="section-title">What changes <em>when you connect.</em></h2>
        </div>
        <div className="stats-grid">
          {stats.map((s, i) => (
            <div key={i} className={`stat-card ${s.color}`}>
              <div className="stat-num">
                <span className="stat-sign">{s.sign}</span>
                <Counter target={s.value} active={active} />
                <span className="stat-suffix">{s.suffix}</span>
              </div>
              <div className="stat-label">{s.label}</div>
              <div className="stat-sub">{s.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Counter = ({ target, active }) => {
  const [n, setN] = React.useState(0);
  React.useEffect(() => {
    if (!active) return;
    const dur = 1400;
    const start = performance.now();
    let raf;
    const tick = (t) => {
      const p = Math.min(1, (t - start) / dur);
      const eased = 1 - Math.pow(1 - p, 3);
      setN(Math.round(eased * target));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [active, target]);
  return <span className="stat-val">{n}</span>;
};

// Audiences — Parent / Teacher / Admin tabs
const Audiences = () => {
  const [tab, setTab] = React.useState(0);
  const audiences = [
    {
      name: 'For Parents', icon: '👪',
      title: 'Informed, involved, always connected',
      body: 'Every message, payment, photo and progress update in one warm app. No more scattered WhatsApp groups or guessing if something was missed.',
      points: ['One inbox — zero missed updates', 'Real-time activity gallery', 'Secure fee payments', 'Direct channel to leadership'],
      color: 'coral',
    },
    {
      name: 'For Teachers', icon: '✎',
      title: 'Less admin, more teaching',
      body: 'Post homework once, reach every parent. Stop repeating yourself across five channels. Spend less time typing, more time with the children.',
      points: ['Homework & updates in seconds', 'Centralised communication', 'Attendance in one tap'],
      color: 'mustard',
    },
    {
      name: 'For Administration', icon: '◆',
      title: 'Full visibility, effortless control',
      body: 'See fees, enrolment, engagement and concerns from a single dashboard. Manage calendars, announcements and staff — all from one portal.',
      points: ['One operations dashboard', 'Fee tracking & reminders', 'Controlled announcements', 'Event & calendar management'],
      color: 'teal',
    },
  ];
  const a = audiences[tab];

  return (
    <section className="audiences">
      <div className="wrap">
        <div className="aud-head">
          <div className="eyebrow">Built for three</div>
          <h2 className="section-title">One platform.<br /><em>Every stakeholder.</em></h2>
        </div>

        <div className="aud-tabs">
          {audiences.map((x, i) => (
            <button key={i} className={`aud-tab ${i === tab ? `active ${x.color}` : ''}`} onClick={() => setTab(i)}>
              <span className="aud-icon">{x.icon}</span>
              {x.name}
            </button>
          ))}
        </div>

        <div className={`aud-panel ${a.color}`}>
          <div className="aud-copy">
            <h3 className="aud-title display">{a.title}</h3>
            <p className="aud-body">{a.body}</p>
            <ul className="aud-list">
              {a.points.map((p, i) => (
                <li key={i}>
                  <span className={`aud-check ${a.color}`}>✓</span>
                  {p}
                </li>
              ))}
            </ul>
          </div>
          <div className="aud-viz">
            <AudienceViz tab={tab} />
          </div>
        </div>
      </div>
    </section>
  );
};

const AudienceViz = ({ tab }) => {
  if (tab === 0) return ( // Parent
    <div className="aviz parent-viz">
      <div className="av-msg coral-bg"><div className="av-from">Ms. Sana</div><div className="av-body">Zara did wonderfully in her poem today 🌟</div></div>
      <div className="av-msg mustard-bg"><div className="av-from">School</div><div className="av-body">Sports Day — Fri 24th at 9am</div></div>
      <div className="av-msg teal-bg"><div className="av-from">Reminder</div><div className="av-body">Fee due April 25</div></div>
      <div className="av-pay">
        <span>April · PKR 24,500</span>
        <span className="av-chip">Pay now →</span>
      </div>
    </div>
  );
  if (tab === 1) return ( // Teacher
    <div className="aviz teacher-viz">
      <div className="tv-header">Grade 2 · Ms. Sana</div>
      <div className="tv-row"><span className="tv-dot coral"></span>Post today's homework</div>
      <div className="tv-row done"><span className="tv-dot mustard"></span>Mark attendance · 24/26</div>
      <div className="tv-row done"><span className="tv-dot teal"></span>Upload art class photos</div>
      <div className="tv-save">All sent to 26 families in one tap</div>
    </div>
  );
  return ( // Admin
    <div className="aviz admin-viz">
      <div className="admin-grid">
        <div className="av-stat"><div className="av-val">247</div><div className="av-lbl">Active students</div></div>
        <div className="av-stat"><div className="av-val teal-ink">94%</div><div className="av-lbl">Fees collected</div></div>
        <div className="av-stat"><div className="av-val mustard-ink">18</div><div className="av-lbl">Teachers</div></div>
        <div className="av-stat"><div className="av-val coral-ink">3</div><div className="av-lbl">Open concerns</div></div>
      </div>
      <div className="admin-chart">
        <div className="chart-label">Fee collection · last 6 months</div>
        <div className="chart-bars">
          {[0.6, 0.75, 0.7, 0.85, 0.9, 0.94].map((v, i) => (
            <div key={i} className="chart-bar" style={{ height: `${v * 100}%` }}></div>
          ))}
        </div>
      </div>
    </div>
  );
};

// Pricing preview
const PricingPreview = () => (
  <section className="pricing-prev" id="pricing">
    <div className="wrap">
      <div className="price-card">
        <div className="price-left">
          <div className="eyebrow">Simple pricing</div>
          <h2 className="section-title">One plan. <em>No surprises.</em></h2>
          <p className="section-lede">
            A flat per-child monthly fee plus a one-time setup. Your first month is
            free. No hidden charges, no feature tiers, no contracts.
          </p>
          <a href="pricing.html" className="btn btn-ghost" style={{ marginTop: 24 }}>See full breakdown →</a>
        </div>
        <div className="price-right">
          <div className="price-row">
            <div className="price-lbl">Per child / month</div>
            <div className="price-val" style={{ fontSize: 20 }}>Get in touch</div>
          </div>
          <div className="price-row dim">
            <div className="price-lbl">One-time setup</div>
            <div className="price-val-sm">Simple flat rate</div>
          </div>
          <div className="price-row dim">
            <div className="price-lbl">First month</div>
            <div className="price-val-sm mustard-ink">Free trial</div>
          </div>
          <a href="contact.html" className="btn btn-primary btn-lg price-cta">Start free month</a>
          <div className="price-foot">Reviewed annually · Scales with enrolment</div>
        </div>
      </div>
    </div>
  </section>
);

// FAQ section — home page
const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    {
      q: "What's the value proposition? What impact will it have on my school?",
      a: "School Connect is not just a tool; it's a digital extension of your school's philosophy. For schools that prioritise intentional learning, emotional well-being, and meaningful parent partnerships, most existing systems feel transactional and noisy. School Connect changes that. It creates a calm, thoughtfully designed digital space that mirrors the experience you've already built within your classrooms.",
    },
    {
      q: "Will it make my teachers more efficient?",
      a: "Yes — by simplifying everything. No more juggling apps. Attendance, homework, updates, and parent communication are all in one place, simple enough for every teacher to use with ease.",
    },
    {
      q: "Do you offer AI features?",
      a: "Yes, built with intention. Our upcoming AI tools help draft communication, automate reminders, and provide insights — saving time while preserving the human touch.",
    },
    {
      q: "What does switching from our current system look like?",
      a: "Seamless and fully supported. We handle your data migration, setup, and team onboarding, so you can switch without disruption.",
    },
  ];

  return (
    <section className="home-faq" id="faq">
      <div className="wrap">
        <div className="home-faq-inner">
          <div className="home-faq-head">
            <div className="eyebrow">Common questions</div>
            <h2 className="section-title">Everything you <em>want to know.</em></h2>
          </div>
          <div className="home-faq-list">
            {faqs.map((f, i) => (
              <div key={i} className={`faq-item ${open === i ? 'open' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
                <div className="faq-q">
                  <span>{f.q}</span>
                  <span className="plus">+</span>
                </div>
                <div className="faq-a">{f.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// Final CTA
const FinalCTA = () => (
  <section className="final-cta">
    <div className="wrap">
      <div className="fcta-inner">
        <svg className="fcta-decor" viewBox="0 0 300 40" aria-hidden="true">
          <rect x="0" y="5" width="300" height="30" rx="4" fill="#3f8cab" opacity="0.85" />
        </svg>
        <h2 className="display fcta-title">
          Ready to connect<br />your school?
        </h2>
        <p className="fcta-sub">
          Thirty minutes. Zero pressure. We'll show you School Connect in action
          — with your school's timetable, your people, your flow.
        </p>
        <div className="fcta-ctas">
          <a href="contact.html" className="btn btn-primary btn-lg">Book a 30-min demo</a>
          <a href="mailto:letstalk@theschoolconnect.com" className="btn btn-ghost btn-lg">letstalk@theschoolconnect.com</a>
        </div>
        <div className="fcta-steps">
          <div className="step"><span className="step-n">01</span>Demo call</div>
          <div className="step"><span className="step-n">02</span>Onboarding plan</div>
          <div className="step"><span className="step-n">03</span>First month free</div>
          <div className="step"><span className="step-n">04</span>Launch &amp; support</div>
        </div>
      </div>
    </div>
  </section>
);

// window.TrustStrip = TrustStrip;
window.Problem = Problem;
window.Features = Features;
window.Stats = Stats;
window.Audiences = Audiences;
window.PricingPreview = PricingPreview;
window.FAQ = FAQ;
window.FinalCTA = FinalCTA;