// Hero — abstract logo-shape illustration
const Hero = ({ headlineIdx = 0, headlines }) => {
  const [parallax, setParallax] = React.useState(0);
  const HEAD = headlines && headlines[headlineIdx] ? headlines[headlineIdx] : null;
  React.useEffect(() => {
    const onScroll = () => setParallax(window.scrollY);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section className="hero">
      {/* Decorative stamped shapes echoing the logo */}
      <div className="hero-decor" aria-hidden="true">
        <svg className="decor-sq coral" viewBox="0 0 100 100">
          <rect x="8" y="8" width="84" height="84" rx="6" fill="#e8798e" filter="url(#grain1)" />
          <defs>
            <filter id="grain1">
              <feTurbulence baseFrequency="0.9" numOctaves="2" />
              <feColorMatrix values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.4 0" />
              <feComposite in2="SourceGraphic" operator="in" />
              <feMerge>
                <feMergeNode in="SourceGraphic" />
                <feMergeNode />
              </feMerge>
            </filter>
          </defs>
        </svg>
        <svg className="decor-sq mustard" viewBox="0 0 100 100">
          <path d="M20 20 L80 20 L80 80 L20 80 Z M30 30 L30 70 L70 70 L70 30 Z M40 40 L40 60 L60 60 L60 40 Z" fill="#e8a94a" />
        </svg>
        <svg className="decor-sq teal" viewBox="0 0 120 30">
          <rect x="0" y="0" width="120" height="30" rx="2" fill="#3f8cab" />
        </svg>
        <svg className="decor-sq cream-sq" viewBox="0 0 100 100">
          <path d="M20 50 Q 30 30, 50 50 T 80 50 M20 70 Q 30 50, 50 70 T 80 70" stroke="#f4ead5" strokeWidth="5" fill="none" strokeLinecap="round" />
        </svg>
      </div>

      <div className="wrap hero-inner">
        <div className="hero-copy">
          <div className="chip">
            <span className="dot"></span>
            Now onboarding schools in Karachi
          </div>

          <h1 className="hero-title display">
            {HEAD || <>Every parent,<br />every teacher,<br /><em>one place.</em></>}
          </h1>

          <p className="hero-lede">
            School Connect is the portal &amp; app that ties classrooms, admin offices
            and families together — fees, homework, updates, and gallery, all in
            one warm, quiet place.
          </p>

          <div className="hero-ctas">
            <a href="contact.html" className="btn btn-primary btn-lg">
              Start free month
              <span aria-hidden="true">→</span>
            </a>
            <a href="#features" className="btn btn-ghost btn-lg">See the features</a>
          </div>


        </div>

        <div className="hero-viz">
          <PhoneMock />
        </div>
      </div>

      <div className="hero-scroll-hint" aria-hidden="true">
        <span>scroll</span>
        <svg viewBox="0 0 12 20" width="10"><path d="M6 2 L6 16 M2 12 L6 16 L10 12" stroke="currentColor" fill="none" strokeWidth="1.5" strokeLinecap="round" /></svg>
      </div>
    </section>
  );
};

// Interactive phone mock
const PhoneMock = () => {
  const [tab, setTab] = React.useState(0);
  const [paid, setPaid] = React.useState(false);
  const tabs = ['Feed', 'Fees', 'Gallery'];

  React.useEffect(() => {
    const timer = setInterval(() => {
      setTab(t => {
        const next = (t + 1) % tabs.length;
        if (next !== 1) setPaid(false);
        return next;
      });
    }, 3000);
    return () => clearInterval(timer);
  }, []);

  React.useEffect(() => {
    if (tab === 1) {
      const t = setTimeout(() => setPaid(true), 1200);
      return () => clearTimeout(t);
    }
  }, [tab]);

  return (
    <div className="phone-frame">
      <div className="phone-glow" />
      <div className="phone-body">
        <div className="phone-notch"></div>
        <div className="phone-screen">
          <div className="phone-status">
            <span>9:41</span>
            <span className="status-icons">
              <svg viewBox="0 0 16 10" width="16"><path d="M1 9 L1 7 M5 9 L5 5 M9 9 L9 3 M13 9 L13 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>
            </span>
          </div>

          <div className="phone-header">
            <div>
              <div className="phone-greet">Good morning,</div>
              <div className="phone-name">Ayesha</div>
            </div>
            <div className="phone-avatar">A</div>
          </div>

          <div className="phone-tabs">
            {tabs.map((t, i) => (
              <button
                key={t}
                className={`phone-tab ${i === tab ? 'active' : ''}`}
                onClick={() => setTab(i)}
              >
                {t}
              </button>
            ))}
          </div>

          <div className="phone-content">
            {tab === 0 && <FeedView />}
            {tab === 1 && <FeesView paid={paid} setPaid={setPaid} />}
            {tab === 2 && <GalleryView />}
          </div>

          <div className="phone-nav">
            <div className="pn-item active"><svg viewBox="0 0 20 20" width="18"><path d="M2 10 L10 3 L18 10 L18 17 L12 17 L12 12 L8 12 L8 17 L2 17 Z" fill="currentColor" /></svg></div>
            <div className="pn-item"><svg viewBox="0 0 20 20" width="18"><rect x="3" y="5" width="14" height="12" rx="2" fill="none" stroke="currentColor" strokeWidth="1.5" /><path d="M3 9 L17 9" stroke="currentColor" strokeWidth="1.5" /></svg></div>
            <div className="pn-item pn-cta"><svg viewBox="0 0 20 20" width="18"><path d="M10 4 L10 16 M4 10 L16 10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" /></svg></div>
            <div className="pn-item"><svg viewBox="0 0 20 20" width="18"><circle cx="10" cy="7" r="3" fill="none" stroke="currentColor" strokeWidth="1.5" /><path d="M4 17 Q 10 12, 16 17" fill="none" stroke="currentColor" strokeWidth="1.5" /></svg></div>
            <div className="pn-item"><svg viewBox="0 0 20 20" width="18"><circle cx="10" cy="10" r="6" fill="none" stroke="currentColor" strokeWidth="1.5" /><path d="M10 7 L10 10 L12 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg></div>
          </div>
        </div>
      </div>
    </div>
  );
};

const FeedView = () => (
  <div className="feed">
    <div className="feed-card">
      <div className="fc-head">
        <div className="fc-tag teal-tag">Announcement</div>
        <div className="fc-time">2h ago</div>
      </div>
      <div className="fc-title">Sports Day — Friday 24th</div>
      <div className="fc-body">Kindly send sneakers &amp; a water bottle. Parents welcome from 9am.</div>
      <div className="fc-by">Ms. Sana · Grade 2</div>
    </div>
    <div className="feed-card">
      <div className="fc-head">
        <div className="fc-tag coral-tag">Homework</div>
        <div className="fc-time">Yesterday</div>
      </div>
      <div className="fc-title">Urdu — Poem recitation</div>
      <div className="fc-body">Practice Allama Iqbal's poem; recite in class on Monday.</div>
      <div className="fc-attach">📎 urdu-poem.pdf</div>
    </div>
    <div className="feed-card small">
      <div className="fc-head">
        <div className="fc-tag mustard-tag">Reminder</div>
      </div>
      <div className="fc-title small">Parent-teacher meeting · Sat 10am</div>
    </div>
  </div>
);

const FeesView = ({ paid, setPaid }) => {
  return (
    <div className="fees">
      <div className={`fee-card ${paid ? 'paid' : ''}`}>
        <div className="fee-label">April 2026 · Tuition</div>
        <div className="fee-amount">
          <span className="fee-currency">PKR</span>
          <span className="fee-num">24,500</span>
        </div>
        <div className="fee-due">{paid ? 'Paid on April 18' : 'Due April 25'}</div>
        <button
          className={`fee-pay ${paid ? 'done' : ''}`}
          onClick={() => setPaid(p => !p)}
        >
          {paid ? '✓ Receipt sent' : 'Pay now — 1 tap'}
        </button>
      </div>
      <div className="fee-history">
        <div className="fh-item"><span>March 2026</span><span className="ok">Paid</span></div>
        <div className="fh-item"><span>February 2026</span><span className="ok">Paid</span></div>
        <div className="fh-item"><span>January 2026</span><span className="ok">Paid</span></div>
      </div>
    </div>
  );
};

const GalleryView = () => (
  <div className="gallery">
    <div className="g-title">Art class · Thursday</div>
    <div className="g-grid">
      <div className="g-cell" style={{ background: 'linear-gradient(135deg, #e8798e, #e8a94a)' }}>
        <svg viewBox="0 0 40 40" width="28" style={{ opacity: 0.3 }}><circle cx="14" cy="14" r="5" fill="#fff" /><path d="M4 36 L16 22 L24 30 L34 20 L36 36 Z" fill="#fff" /></svg>
      </div>
      <div className="g-cell" style={{ background: 'linear-gradient(135deg, #3f8cab, #6eb4cd)' }}></div>
      <div className="g-cell" style={{ background: 'linear-gradient(135deg, #e8a94a, #f0c07a)' }}></div>
      <div className="g-cell" style={{ background: 'linear-gradient(135deg, #6eb4cd, #3f8cab)' }}></div>
      <div className="g-cell" style={{ background: 'linear-gradient(135deg, #e8798e, #f4a5b4)' }}></div>
      <div className="g-cell more">+24</div>
    </div>
  </div>
);

window.Hero = Hero;