// ─── Parent App + Bus Tracking Section ────────────────────

function PhoneFrame({ children, title = 'EduGuard' }) {
  return (
    <div style={{
      width: 300,
      height: 610,
      background: 'var(--ink-0)',
      borderRadius: 42,
      padding: 9,
      boxShadow: '0 40px 80px rgba(13,21,48,0.25), 0 12px 24px rgba(13,21,48,0.12)',
      position: 'relative',
    }}>
      {/* Screen */}
      <div style={{
        width: '100%', height: '100%',
        background: 'var(--bg-0)',
        borderRadius: 34,
        overflow: 'hidden',
        position: 'relative',
      }}>
        {/* Notch */}
        <div style={{
          position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)',
          width: 100, height: 24, background: 'var(--ink-0)', borderRadius: 100, zIndex: 10,
        }} />
        {/* Status bar */}
        <div style={{
          paddingTop: 14, paddingLeft: 24, paddingRight: 24, paddingBottom: 8,
          display: 'flex', justifyContent: 'space-between',
          fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
          color: 'var(--ink-0)',
        }}>
          <span>9:41</span>
          <span style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
            <span>●●●●</span> <span>5G</span>
          </span>
        </div>
        {children}
      </div>
    </div>
  );
}

function ParentAppScreen() {
  return (
    <PhoneFrame>
      {/* App header */}
      <div style={{ padding: '12px 20px 16px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
          <div>
            <div className="mono" style={{ fontSize: 9, color: 'var(--ink-2)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>
              Good morning
            </div>
            <div style={{ fontWeight: 600, fontSize: 17, marginTop: 2, color: 'var(--ink-0)' }}>Mrs. Shah</div>
          </div>
          <div style={{
            width: 36, height: 36, borderRadius: '50%',
            background: 'var(--bg-2)', border: '1px solid var(--line)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 11, fontWeight: 600, color: 'var(--ink-1)',
          }}>RS</div>
        </div>

        {/* Status card — child */}
        <div style={{
          padding: 14,
          background: 'linear-gradient(135deg, #1f6f52 0%, #164d39 100%)',
          borderRadius: 14,
          color: 'white',
          marginBottom: 12,
          boxShadow: '0 8px 20px rgba(31,111,82,0.25)',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 10 }}>
            <div>
              <div style={{ fontSize: 10, opacity: 0.75, letterSpacing: '0.08em', textTransform: 'uppercase' }}>Ananya · Grade 7-B</div>
              <div style={{ fontSize: 14, fontWeight: 600, marginTop: 3 }}>At school — Science Lab</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#a6f8a0', boxShadow: '0 0 0 3px rgba(166,248,160,0.3)' }} />
              <span className="mono" style={{ fontSize: 9, letterSpacing: '0.1em' }}>LIVE</span>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, fontSize: 11 }}>
            <div>
              <div style={{ opacity: 0.7, fontSize: 9, letterSpacing: '0.08em', textTransform: 'uppercase' }}>Entered campus</div>
              <div style={{ fontWeight: 600, marginTop: 2, fontSize: 12 }}>7:52 AM</div>
            </div>
            <div>
              <div style={{ opacity: 0.7, fontSize: 9, letterSpacing: '0.08em', textTransform: 'uppercase' }}>Attendance</div>
              <div style={{ fontWeight: 600, marginTop: 2, fontSize: 12 }}>4 of 4 periods ✓</div>
            </div>
          </div>
        </div>

        {/* Bus tracker */}
        <div style={{
          padding: 14,
          background: 'var(--bg-1)',
          border: '1px solid var(--line)',
          borderRadius: 14,
          marginBottom: 12,
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <Icon.Bus style={{ width: 16, height: 16, color: 'var(--saffron)' }} />
              <span style={{ fontSize: 12, fontWeight: 600 }}>Bus 7A · Evening</span>
            </div>
            <span style={{ fontSize: 10, color: 'var(--green)', fontFamily: 'var(--font-mono)', fontWeight: 600, letterSpacing: '0.05em' }}>ETA 4:18 PM</span>
          </div>
          {/* Mini route */}
          <div style={{ position: 'relative', height: 60 }}>
            <svg viewBox="0 0 260 60" style={{ width: '100%', height: '100%' }}>
              <path d="M 10 45 Q 80 10, 140 30 T 250 20" fill="none" stroke="var(--line-strong)" strokeWidth="2" strokeDasharray="3 3" />
              <path d="M 10 45 Q 80 10, 120 25" fill="none" stroke="var(--saffron)" strokeWidth="2.5" />
              <circle cx="10" cy="45" r="4" fill="var(--saffron)" />
              <circle cx="120" cy="25" r="5" fill="var(--saffron)" stroke="white" strokeWidth="2" />
              <circle cx="250" cy="20" r="4" fill="none" stroke="var(--ink-2)" strokeWidth="1.5" />
              <text x="10" y="58" fontSize="8" fontFamily="var(--font-mono)" fill="var(--ink-2)">School</text>
              <text x="102" y="13" fontSize="8" fontFamily="var(--font-mono)" fill="var(--saffron)" fontWeight="600">Bus here</text>
              <text x="220" y="12" fontSize="8" fontFamily="var(--font-mono)" fill="var(--ink-2)">Your stop</text>
            </svg>
          </div>
        </div>

        {/* Notice */}
        <div style={{
          padding: 12,
          background: 'var(--bg-2)',
          borderRadius: 12,
          display: 'flex', alignItems: 'flex-start', gap: 10,
        }}>
          <div style={{ width: 28, height: 28, borderRadius: 8, background: 'var(--saffron-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <Icon.Bell style={{ width: 14, height: 14, color: 'var(--saffron)' }} />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, fontWeight: 600, marginBottom: 2, color: 'var(--ink-0)' }}>Science Fair · Feb 18</div>
            <div style={{ fontSize: 10.5, color: 'var(--ink-1)', lineHeight: 1.4 }}>Project submissions due Friday. Tap to RSVP.</div>
          </div>
        </div>
      </div>
    </PhoneFrame>
  );
}

function ParentBusSection() {
  return (
    <section id="for-parents" className="section" style={{ background: 'var(--bg-1)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="wrap">
        <div className="parent-grid">
          <div className="parent-text-header">
            <Eyebrow>The Parent Experience</Eyebrow>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 5vw, 58px)', margin: '20px 0 24px' }}>
              The app parents <em className="display-italic" style={{ color: 'var(--saffron)' }}>actually want to open.</em>
            </h2>
          </div>

          <div className="parent-text-body">
            <p style={{ fontSize: 17, color: 'var(--ink-1)', lineHeight: 1.6, marginBottom: 36, maxWidth: 560 }}>
              Not another ERP portal. Not another WhatsApp group. A single app where parents see their child, their bus, their circulars, their teacher notes — and nothing more.
            </p>

            <div style={{ display: 'grid', gap: 22 }}>
              {[
                { n: '01', t: 'Live location, always', b: 'Where their child is on campus, this minute. No texting the coordinator, no guessing.' },
                { n: '02', t: 'Bus ETA to their stop', b: 'Accurate to the minute. Parents stop loitering at the gate in the rain.' },
                { n: '03', t: 'One channel, no noise', b: 'Circulars, reminders, teacher notes, emergencies — all in one place, delivered to the right parent.' },
              ].map(item => (
                <div key={item.n} style={{ display: 'grid', gridTemplateColumns: '48px 1fr', gap: 18, alignItems: 'start' }}>
                  <div className="display-italic" style={{ fontSize: 32, color: 'var(--saffron)', lineHeight: 1 }}>{item.n}</div>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 16, marginBottom: 4 }}>{item.t}</div>
                    <div style={{ color: 'var(--ink-1)', fontSize: 14.5, lineHeight: 1.55 }}>{item.b}</div>
                  </div>
                </div>
              ))}
            </div>

            <div style={{ display: 'flex', gap: 10, marginTop: 36 }}>
              <a href="https://play.google.com/store/apps/details?id=com.eduguard.parent" target="_blank" style={{
                padding: '11px 18px',
                background: 'var(--ink-0)',
                color: 'var(--bg-1)',
                borderRadius: 10,
                textDecoration: 'none',
                fontSize: 12.5,
                display: 'flex', alignItems: 'center', gap: 10,
              }}>
                <img width="28" height="28" src="https://img.icons8.com/fluency/48/google-play-store-new.png" alt="google-play-store-new"/>
                <span>
                  <div style={{ fontSize: 9, opacity: 0.7, letterSpacing: '0.08em', textTransform: 'uppercase' }}>Get it on</div>
                  <div style={{ fontWeight: 600, marginTop: 1 }}>Google Play</div>
                </span>
              </a>
            </div>
          </div>

          <div className="parent-app-wrapper">
            <ParentAppScreen />
          </div>
        </div>
      </div>
      <style>{`
        .parent-grid {
          display: grid;
          grid-template-columns: minmax(0, 1fr) 320px;
          grid-template-areas: 
            "header app"
            "body app";
          align-items: center;
          column-gap: 80px;
        }
        .parent-text-header { grid-area: header; align-self: end; }
        .parent-text-body { grid-area: body; align-self: start; }
        .parent-app-wrapper { grid-area: app; display: flex; justify-content: center; align-self: center; }
        
        @media (max-width: 900px) {
          .parent-grid { 
            grid-template-columns: 1fr !important;
            grid-template-areas: "header" "app" "body" !important;
            gap: 32px !important;
          }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { ParentBusSection, PhoneFrame });