// Inner page components — Features, Pricing, About, Blog, Demo
const PageHero = ({ eyebrow, title, lede }) => (
  <section className="page-hero">
    <div className="wrap page-hero-inner">
      <div className="eyebrow">{eyebrow}</div>
      <h1 className="display" dangerouslySetInnerHTML={{ __html: title }} />
      <p dangerouslySetInnerHTML={{ __html: lede }} />
    </div>
  </section>
);

// ============ FEATURES PAGE ============
const FeaturesPage = () => {
  const groups = [
    {
      eyebrow: 'For families',
      title: 'Built for <em>parents.</em>',
      desc: 'Everything parents need to feel informed and involved — from daily classroom moments to secure fee payments.',
      items: [
        { icon: 'announce', title: 'One inbox, zero missed updates', desc: 'Every announcement, sorted by class and child.', color: 'coral' },
        { icon: 'gallery', title: 'Real-time activity gallery', desc: 'Classroom moments shared safely with just the right families.', color: 'coral' },
        { icon: 'fee', title: 'One-tap fee payments', desc: 'Secure online payments with instant digital receipts.', color: 'mustard' },
        { icon: 'mood', title: 'Mood tracking', desc: 'Track your child’s mood and emotional well-being with simple daily check-ins.', color: 'teal' },
        { icon: 'bell', title: 'Smart reminders', desc: 'Parents set their own nudges for homework and fees.', color: 'mustard' },
        { icon: 'complaint', title: 'Raise a concern', desc: 'A respectful, direct channel to school leadership.', color: 'cream' },
        { icon: 'notify', title: 'Multi-child support', desc: 'Parents with more than one child manage all from a single account — one app, one family.', color: 'teal' },
      ]
    },
    {
      eyebrow: 'For teachers',
      title: 'Built for <em>teaching.</em>',
      desc: 'Less admin, more teaching time. Tools designed around how teachers actually work, not how IT imagines they do.',
      items: [
        { icon: 'homework', title: 'Homework in seconds', desc: 'Post once, reach every parent instantly, with attachments.', color: 'coral' },
        { icon: 'attend', title: 'One-tap attendance', desc: 'Mark the register and parents are notified automatically.', color: 'teal' },
        { icon: 'mood', title: 'Daily Mood Update', desc: 'Teacher-parent conversations with full history, always.', color: 'mustard' },
        { icon: 'timetable', title: 'Weekly timetable', desc: 'Your classes, subjects and rooms in your pocket.', color: 'cream' },
        { icon: 'gallery', title: 'Photo video uploads', desc: 'Capture a moment, share it with families — that simple.', color: 'coral' },
        { icon: 'reports', title: 'Report cards digitally', desc: 'Upload reports in a single tap that parents can access in realtime.', color: 'teal' },
      ]
    },
    {
      eyebrow: 'For school leaders',
      title: 'Built for <em>running a school.</em>',
      desc: 'One portal, total operational visibility. Fees, enrolment, engagement, concerns — all at a glance.',
      items: [
        { icon: 'dash', title: 'Admin dashboard', desc: 'Fees, enrolment and engagement in one operational view.', color: 'mustard' },
        { icon: 'fee', title: 'Fee tracking & reminders', desc: 'See who\u2019s paid, who hasn\u2019t, and auto-nudge gently.', color: 'teal' },
        { icon: 'announce', title: 'Controlled announcements', desc: 'Broadcast to whole school, a year, or a single class.', color: 'coral' },
        { icon: 'calendar', title: 'Annual calendar', desc: 'Term dates, holidays and PTMs — single source of truth.', color: 'cream' },
        { icon: 'events', title: 'Events', desc: 'RSVPs and payment in one flow.', color: 'mustard' },
        { icon: 'complaint', title: 'Concern management', desc: 'Track, assign and resolve parent concerns with full audit trail.', color: 'teal' },
      ]
    },
    {
      eyebrow: 'Smart extras',
      soon: true,
      title: 'Built for <em>the future.</em>',
      desc: 'AI assistance and thoughtful automation that keep things calm, never noisy.',
      items: [
        { icon: 'ai', title: '24/7 AI assistant', desc: 'Answers routine parent queries, trained on your school\u2019s content.', color: 'cream' },
        { icon: 'chat', title: 'Smart escalation', desc: 'AI handles easy questions; complex ones go to the right staff.', color: 'coral' },
        { icon: 'voice', title: 'Voice Assistant', desc: 'Teachers record a quick voice note , it auto-transcribes into a parent-friendly remark.', color: 'mustard' },
        { icon: 'class', title: 'Online Classes', desc: 'Live and recorded classes inside School Connect, parents and students stay in one ecosystem.', color: 'teal' },
        { icon: 'circles', title: 'Parent Circles', desc: 'A quieter, kinder space for parents to connect, class-by-class, interest-by-interest, drama-free.', color: 'coral' },
        { icon: 'yearbook', title: 'Students\u2019 Yearbook', desc: 'The whole year, lovingly curated. Every smile, every milestone, pulled together into a memory book.', color: 'cream' },
        // { icon: 'notify', title: 'Quiet hours DND', desc: 'Per-family notification rules. Never noisy, always respectful.', color: 'mustard' },
        // { icon: 'dash', title: 'Multi-campus support', desc: 'Branches, shifts, sections — one portal, one bill.', color: 'teal' },
      ]
    },
  ];

  return (
    <>
      <Nav current="features" />
      <PageHero
        eyebrow="The toolkit"
        title="Every tool a modern<br/>school needs</em>"
        lede="Purpose-built features organised around the three people who run your school — parents, teachers and leadership."
      />
      <section className="features-page-groups">
        <div className="wrap">
          {groups.map((g, i) => (
            <div key={i} className="feat-group">
              <div className="feat-group-head">
                <span className="eyebrow">{g.eyebrow}</span>
                {g.soon && <span className="soon-badge">Rolling out soon</span>}
                <h2 dangerouslySetInnerHTML={{ __html: g.title }} />
                <p>{g.desc}</p>
              </div>
              <div className="feat-group-list">
                {g.items.map((f, j) => (
                  <div key={j} className="feat-row">
                    <div className={`feat-icon ${f.color}`}><FeatIcon name={f.icon} /></div>
                    <div>
                      <div className="feat-title">{f.title}</div>
                      <div className="feat-desc" dangerouslySetInnerHTML={{ __html: f.desc }} />
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>
      <FinalCTA />
      <Footer />
    </>
  );
};

// ============ PRICING PAGE ============
const PricingPage = () => {
  const [openFaq, setOpenFaq] = React.useState(0);
  const faqs = [
    { q: 'What does the one-time setup fee include?', a: 'Dedicated onboarding specialist, data migration from your existing system, custom branding of the app with your school\u2019s identity, staff training sessions, and two weeks of white-glove launch support.' },
    // { q: 'Is the pricing the same for small and large schools?', a: 'Yes — PKR 300 per enrolled child per month, flat. Whether you\u2019re a neighbourhood montessori with 60 students or an academy with 2,000, the per-child rate is the same. No tiers, no feature gates.' },
    { q: 'How does the first-month free trial work?', a: 'Full product, full onboarding. We set up your school, migrate your data, train your staff and run the app with your real families for a full month. Only after that does billing begin.' },
    { q: 'Do parents have to pay anything?', a: 'Never. Parents download the app for free. All fees are covered by the school under a simple per-child model.' },
    { q: 'Is data secure? Where is it hosted?', a: 'All data is encrypted at rest and in transit, hosted in Pakistan-region data centres. Photos of children are access-controlled to just that child\u2019s parents and their teachers — never public.' },
    // { q: 'Can we use our own payment gateway?', a: 'Yes. We support major Pakistani gateways including JazzCash, Easypaisa, HBL, Meezan and card processors. Schools choose their preferred gateway during setup.' },
  ];

  return (
    <>
      <Nav current="pricing" />
      <PageHero
        eyebrow="Pricing"
        title="One plan. <em>No surprises.</em><br/>Just honest pricing."
        lede="One flat per-child monthly rate, a one-time setup fee, and your first month completely free. Get in touch and we'll walk you through it."
      />
      <section className="pricing-page">
        <div className="wrap">
          <div className="pricing-main">
            <div className="price-col featured unified">
              <h3>School Connect</h3>
              <div className="price-sub">One plan. Every feature. Unlimited staff.</div>

              <div className="unified-price-row">
                <div className="unified-price-label">One-time installation</div>
                <div className="price-big">
                  <span className="pb-num" style={{ fontSize: 28 }}>Get in touch for pricing</span>
                </div>
              </div>

              <div className="unified-price-row">
                <div className="unified-price-label">Per child / month</div>
                <div className="price-big">
                  <span className="pb-num" style={{ fontSize: 28 }}>Simple flat rate</span>
                </div>
              </div>

              <ul>
                <li><span className="check">✓</span>All features — no gates</li>
                <li><span className="check">✓</span>Unlimited parents, teachers &amp; admins</li>
                <li><span className="check">✓</span>Dedicated onboarding lead</li>
                <li><span className="check">✓</span>Full data migration</li>
                <li><span className="check">✓</span>Custom branding setup</li>
                <li><span className="check">✓</span>Staff training sessions</li>
                <li><span className="check">✓</span>Two-week launch support</li>
                {/* <li><span className="check">✓</span>AI assistant &amp; live chat included</li> */}
                <li><span className="check">✓</span>Pakistani payment gateways</li>
                <li><span className="check">✓</span>Priority support (avg. response: 2 hrs)</li>
                {/* <li><span className="check">✓</span>Monthly product updates</li> */}
              </ul>

              <div style={{ marginTop: 28, padding: 16, background: 'rgba(232,169,74,0.08)', borderRadius: 12, fontSize: 14, color: 'var(--mustard-ink)' }}>
                <strong>First month free</strong><br />
                <span style={{ color: 'var(--ink-muted)', fontSize: 13 }}>Billing begins only after your school is live and running smoothly.</span>
              </div>
              <a href="contact.html" className="btn btn-primary" style={{ marginTop: 24 }}>Start free month →</a>
            </div>
          </div>

          <div className="pricing-faq">
            <h2 className="section-title" style={{ marginBottom: 30 }}>Questions, <em>answered.</em></h2>
            {faqs.map((f, i) => (
              <div key={i} className={`faq-item ${openFaq === i ? 'open' : ''}`} onClick={() => setOpenFaq(openFaq === 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>
      </section>
      <FinalCTA />
      <Footer />
    </>
  );
};

// ============ ABOUT PAGE ============
const AboutPage = () => {
  const values = [
    { n: '01', color: 'coral', title: 'Quiet by design', desc: 'Software that sits in the background of a school — never loud, never in the way. Notifications that respect family time. Interfaces that feel calm.' },
    { n: '02', color: 'mustard', title: 'Warm, not corporate', desc: 'Schools aren\u2019t factories and families aren\u2019t customers. We build with the same warmth we\u2019d want for our own children\u2019s school.' },
    { n: '03', color: 'teal', title: 'Built in Karachi', desc: 'Pakistani payment gateways, data hosted locally, and a team that answers the phone. Understanding context is a feature.' },
  ];
  const team = [
    { img: 'assets/Eifa Navaid.jpg', name: 'Eifa Navaid', role: 'Founder & CEO' },
    { img: 'assets/Abdul Ahad.jpeg', name: 'Abdul Ahad', role: 'Co-Founder & Technology Head' },
    { img: 'assets/Akber Shah.jpeg', name: 'Akbar Shah', role: 'Business Advisor' },
  ];
  return (
    <>
      <Nav current="about" />
      <PageHero
        eyebrow="Our story"
        title="We're a small team in Karachi<br/>building <em>something warmer</em>"
        lede="School Connect began when our founder noticed her children’s school was using four different platforms to keep parents informed.
        <br/><br/>What should have felt reassuring became chaotic, constant WhatsApp messages, scattered updates, and the hassle of switching between apps. So she built something simpler.<br/><br/><em>One place, one clear connection.</em>"
      />
      <section className="about-page">
        <div className="wrap">

          <div className="values-grid">
            {values.map((v, i) => (
              <div key={i} className={`value-card ${v.color}`} data-n={v.n}>
                <h4>{v.title}</h4>
                <p>{v.desc}</p>
              </div>
            ))}
          </div>

          <div className="team-section">
            <div className="eyebrow">The people</div>
            <h2 className="section-title" style={{ marginTop: 16 }}>Small team. <em>Big focus.</em></h2>
            <div className="team-grid">
              {team.map((t, i) => (
                <div key={i} className="team-card">
                  <img className="team-avatar" src={t.img} alt={t.name} />
                  <h5>{t.name}</h5>
                  <p>{t.role}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
      <FinalCTA />
      <Footer />
    </>
  );
};

// ============ SHARED BLOG DATA ============
const BLOG_POSTS = [
  {
    slug: 'memorisation-isnt-teaching',
    title: 'Memorisation Isn\'t Teaching. And Most of the World Has Already Moved On.',
    desc: 'Every Pakistani child has chanted the times tables. But are they learning multiplication — or just a sound? And what is the rest of the world already doing differently?',
    date: 'May 1, 2026', read: '7 min',
    grad: 'linear-gradient(135deg, #6b8f71, #a8c5a0)', img: 'assets/blogs-images/5.jpg',
    content: [
      { type: 'bold-italic', text: '"Two ones za two. Two twos za four. Two threes za six."' },
      { type: 'p', text: 'Every Pakistani child has chanted this. We chanted it. Our parents chanted it. Our grandparents chanted it. (My khala, honestly, still mutters them under her breath when she is calculating discounts at Khaadi. Some habits do not die.)' },
      { type: 'p', text: 'But here is the thing.' },
      { type: 'p', text: 'If you stop a 7-year-old mid-chant and ask, "Beta, what does \'za\' actually mean?" they will look at you the way you would look at someone asking you to translate ancient Chinese.' },
      { type: 'p', text: 'Because they do not know.' },
      { type: 'p', text: 'They have no idea that "za" is simply a child\'s mishearing of "are." That "two ones are two" means "if you have two groups of one apple, you have two apples."' },
      { type: 'p', text: 'They are saying it perfectly. They are passing the tables test. They might even win the class recital prize.' },
      { type: 'p', text: 'But they are not learning multiplication. They are learning a sound.' },
      { type: 'p', text: 'And that small, perfectly ordinary classroom moment is the entire story of what\'s quietly broken in our education system. And, more importantly, what\'s quietly being fixed in the rest of the world.' },
      { type: 'h2', text: 'The world has shifted. Quietly. Steadily. Without much fanfare.' },
      { type: 'p', text: 'Here is something most parents in Pakistan do not know.' },
      { type: 'p', text: 'Finland, which has consistently ranked among the world\'s top education systems, has been moving away from subject-based teaching in early years since 2018.' },
      { type: 'p', text: 'Singapore, the country that used to define academic rigour, has been shifting toward inquiry-based learning for over a decade.' },
      { type: 'p', text: 'Even Cambridge, that staple of every middle-class Pakistani school dream, has quietly published research saying long-term retention from pure memorisation drops below 25% within six months.' },
      { type: 'p', text: 'In other words, three-quarters of what we make our children memorise simply leaves their heads by the next term.' },
      { type: 'p', text: 'That is not the children\'s fault. That is how human brains are designed.' },
      { type: 'bold-italic', text: 'We learn what we use. We forget what we don\'t.' },
      { type: 'h2', text: 'What modern classrooms actually look like in the rest of the world.' },
      { type: 'p', text: 'In a primary school in Helsinki, Year 2 children learn multiplication by physically laying out objects on the floor. Buttons. Stones. Sometimes their own shoes when nothing else is around. By the time they recite a table, they have touched it, counted it, rearranged it, and understood it. The chant is the last step, not the first.' },
      { type: 'p', text: 'In Reggio Emilia, the small Italian town that famously rewrote early childhood education, children learn maths through long-term projects that can run for weeks, building a model city. Designing a pretend grocery shop. Planning a class garden. The maths emerges from the project, not from a worksheet. By the time a Reggio child meets multiplication, they have already lived inside it.' },
      { type: 'p', text: 'In a Tokyo primary school, teachers are trained never to explain a concept until the children have first tried to discover it themselves. They call this "productive struggle." It looks, to an outside observer, almost like the teacher is doing nothing. But it produces some of the strongest mathematical minds in the world, year after year.' },
      { type: 'p', text: 'In Stockholm, primary schools are slowly removing screens from the youngest classrooms entirely, after years of research showing that handwriting and physical play build long-term memory pathways that screens simply cannot.' },
      { type: 'p', text: 'These are not eccentric experiments. They are the standard in education systems that consistently outperform ours, by a wide margin, on every measure that matters.' },
      { type: 'h2', text: 'What "moving past memorisation" actually means.' },
      { type: 'p', text: 'This is the part that gets misunderstood. So let me say it plainly.' },
      { type: 'p', text: 'It does not mean throwing out facts. Children still need their multiplication tables. They still need basic vocabulary, basic history, and basic dates. Facts are tools. We need them.' },
      { type: 'p', text: 'What it means is this: the thinking that uses the tools is the goal. Not the recitation.' },
      { type: 'p', text: 'A child who chants "2 ones za two" has memorised a sound. A child who knows that 2 baskets of 1 apple equals 2 apples has understood something. A child who can then ask, "What if there were 5 baskets?" without being told to, has crossed into real learning.' },
      { type: 'p', text: 'We need all three. But we have been celebrating only the first for far too long.' },
      { type: 'h2', text: 'So what does this look like in a Pakistani classroom?' },
      { type: 'p', text: 'Honestly? It looks like very small shifts. None of these requires a new building, a new curriculum, or a new fee.' },
      { type: 'p', text: 'Read aloud for ten minutes a day. Add one open-ended question to every test. Replace one homework sheet a week with a real-world task. (How much does our family spend on roti in a month? Find out.) Let children ask the first question of the lesson, before the teacher speaks.' },
      { type: 'p', text: 'That\'s it. Begin there.' },
      { type: 'p', text: 'If you are a parent reading this, the most useful single thing you can do is stop asking your child, "What marks did you get?" and start asking, "What did you find interesting today?"' },
      { type: 'p', text: 'The first question makes them anxious. The second one makes them think.' },
      { type: 'h2', text: 'This part gives me hope.' },
      { type: 'p', text: 'Some new schools in Pakistan are quietly beginning to do this work too. I\'m from Karachi, so I see it more closely than most. There are classrooms here that have begun to slow down. Teachers who are nurturing curiosity instead of crushing it. Principals who have made room for play, for projects, for the messy, beautiful business of a child actually thinking.' },
      { type: 'p', text: 'I am the happiest to see this work happening. I just hope the schools that are still running on conventional engines — with the chant in the morning and the worksheet in the afternoon — follow suit soon. The world is not waiting. Our children certainly aren\'t.' },
      { type: 'italic', text: '(In another post, I will share a list of Karachi schools you can look at if you want this kind of learning for your child. Schools that are raising observers and explorers, not rote learners.)' },
      { type: 'h2', text: 'A small note from us at School Connect.' },
      { type: 'p', text: 'We don\'t run classrooms. That is the school\'s craft, and we have deep respect for it. What we build is the EdTech that supports this kind of thinking-first learning.' },
      { type: 'p', text: 'Because the technology in a child\'s school journey should reflect the same values that their teachers are building in the classroom. Slowly. Patiently. One thinking moment at a time.' },
      { type: 'p', text: 'If you are a school rep reading this, let\'s talk.' },
    ]
  },
  {
    slug: 'story-chapter-1',
    title: 'The Story of School Connect — Chapter 1: An Idea Was Born',
    desc: 'The moment that sparked everything — a cluttered inbox, fragmented school communication across Karachi, and the realisation that something had to change.',
    date: 'April 1, 2026', read: '4 min',
    grad: 'linear-gradient(135deg, #e8798e, #f4a5b4)', img: 'assets/blogs-images/1.png',
    content: [
      { type: 'p', text: 'Technology is at our disposal — better than ever before. The phones in our pockets are more powerful than any computer that existed a generation ago. And yet, for schools across Pakistan, communication between home and school still happens in fragments: paper circulars, handwritten diaries, and WhatsApp groups that never stop buzzing.' },
      { type: 'p', text: 'I\'m not being skeptical about technology\'s potential. But isn\'t that the pattern we\'ve always seen? Tools arrive, promise transformation, and yet the same problems persist — because the tools were built for a different context, or ask too much of the people they\'re supposed to serve.' },
      { type: 'p', text: 'While technology is at its peak, we should be using it to its fullest potential — to build meaningful systems, create powerful solutions, and make life simpler, not more complicated. That conviction was sitting quietly in my mind when everything changed.' },
      { type: 'h2', text: 'The Moment That Changed Everything' },
      { type: 'p', text: 'I was sitting with this thought one day when my phone beeped. Once. Twice. Thrice, and then more. Messages from my children\'s school. Emails followed. Fee vouchers arrived in a separate app. Homework reminders in a WhatsApp group. It was all the same information — just delivered in multiple places, at different times, in different formats.' },
      { type: 'p', text: 'It irritated me, not because the information was unimportant, but because it arrived in fragments. It disrupted me at a time when I didn\'t want to engage with my phone. It felt like an invasion. Not of privacy in a strict sense, but of attention, of mental space.' },
      { type: 'h2', text: 'The Problem Every Karachi Parent Knows' },
      { type: 'p', text: 'The average school-going family in Karachi manages three to four school WhatsApp groups, a paper diary that gets lost in a school bag, and at least one app downloaded at the school\'s request that nobody actually uses. Important updates — fee deadlines, early dismissals, test schedules — compete with reaction emojis and off-topic conversation. Nothing is trusted because everything is noise.' },
      { type: 'p', text: 'This wasn\'t just a technology problem. It was a design problem. Schools needed a single, reliable communication channel that parents could trust — one that replaced the chaos rather than adding to it. And design problems have design solutions.' },
      { type: 'quote', text: 'And then it struck me. This was exactly the problem worth solving. This was the moment that gave birth to the idea of School Connect.' },
    ]
  },
  {
    slug: 'story-chapter-2',
    title: 'The Story of School Connect — Chapter 2: When the Idea Became Inevitable',
    desc: 'From a half-formed thought to a shared conviction — how a single conversation turned a frustration into a full product vision for school communication in Pakistan.',
    date: 'April 8, 2026', read: '4 min',
    grad: 'linear-gradient(135deg, #3f8cab, #6eb4cd)', img: 'assets/blogs-images/2.png',
    content: [
      { type: 'p', text: 'Ideas flow freely in all of our minds every day. Most of them are fleeting — surface-level observations that dissolve before they can take root. But occasionally, an idea feels different. It has weight. It doesn\'t let you sleep.' },
      { type: 'p', text: 'This was one of those ideas. And yet, I\'ve learned — perhaps you have too — that ideas alone mean very little. We often over-scrutinise them. We question too early, too harshly. And in that process, many good ideas quietly die at our own hands, simply because we doubt their timing or relevance.' },
      { type: 'quote', text: 'Nothing is more powerful than an idea whose time has come.' },
      { type: 'h2', text: 'Why This Idea Was Different' },
      { type: 'p', text: 'Because this idea wasn\'t random — it was born from a real, lived frustration that I knew wasn\'t mine alone. Every parent I spoke to described the same chaos: multiple channels, no single source of truth, constant background anxiety about whether they\'d missed something important about their child\'s school day.' },
      { type: 'p', text: 'The school management software that existed in Pakistan didn\'t solve this. Most systems were built for school administration — efficient for the office, invisible to the family at home. The few parent-facing apps that tried to engage families added another layer to an already overcrowded communication stack rather than replacing anything.' },
      { type: 'h2', text: 'The Conversation That Started It All' },
      { type: 'p', text: 'So instead of overthinking it, I shared the idea with my husband. And luckily for me, he is a developer — the kind of person who can immediately separate emotion from execution and tell you what is actually possible within real constraints. I needed that reality check.' },
      { type: 'p', text: 'His response changed everything. He didn\'t just validate the idea. He said something that shifted everything: "Let\'s brainstorm." And just like that, everything started moving.' },
      { type: 'p', text: 'For the next few days and nights, we weren\'t really talking about anything else. We were mapping the problem, defining what a good solution would look like, and imagining what a school management system built from the parent\'s perspective — rather than the administrator\'s — might actually feel like to use. That\'s when School Connect stopped being just an idea in my head and started becoming a real product.' },
    ]
  },
  {
    slug: 'story-chapter-3',
    title: 'The Story of School Connect — Chapter 3: A Sprint Towards Execution',
    desc: 'Late nights, design decisions, and code commits — the quiet, unglamorous work of building a school management app from the ground up in Karachi.',
    date: 'April 15, 2026', read: '4 min',
    grad: 'linear-gradient(135deg, #e8a94a, #f0c07a)', img: 'assets/blogs-images/3.png',
    content: [
      { type: 'h2', text: 'Building the Identity First' },
      { type: 'p', text: 'The first thing any product needs before it can exist in the world is a face — something that makes it recognisable and communicates its values before a single word is read. For School Connect, that meant building a visual identity that felt warm, trustworthy, and distinctly Pakistani, without leaning on tired design tropes.' },
      { type: 'p', text: 'Thanks to Canva, my ideas could finally take shape without the weeks-long back-and-forth that outsourcing design would have required. What once lived only in my head began to have a face — colours, letterforms, a logo that felt like the product it would represent.' },
      { type: 'p', text: 'I spent hours refining the right palette and typeface combination. My philosophy was specific: it had to communicate connection — friendly and warm, slightly informal, but still confident and intentional. Not the corporate blue of traditional school software. Not the aggressive brightness of consumer apps. Something in between. Something that could sit comfortably in a parent\'s hand at 7am on a school morning.' },
      { type: 'h2', text: 'Why I Didn\'t Outsource the Design' },
      { type: 'p', text: 'I didn\'t hand it to a professional designer — at least not at this stage — because I felt the essence of what School Connect should feel like lived in my head and heart. A designer working from a brief would deliver something technically proficient but potentially missing the emotional core that made this idea worth building in the first place. The warmth had to come from within.' },
      { type: 'h2', text: 'Building the Product, Feature by Feature' },
      { type: 'p', text: 'From there, development moved to Adi — my husband — who took on the engineering side of School Connect. He is fast, methodical, and most importantly, he listens. That matters more than it sounds. Many products fail not because the engineering is bad but because the gap between the person with the vision and the person with the tools is too wide.' },
      { type: 'p', text: 'Quietly, after the lights dimmed and the kids went to sleep, we started building. Step by step. Screen by screen. Feature by feature — attendance, then homework notifications, then fee collection, then the parent activity feed. Solving one problem before moving to the next, never skipping ahead.' },
      { type: 'quote', text: 'It took weeks. But every feature that worked felt like proof that the whole thing could. The foundation was taking shape.' },
    ]
  },
  {
    slug: 'story-final-chapter',
    title: 'The Story of School Connect — Final Chapter: Bringing School Closer to Home',
    desc: 'School Connect is live. Here\'s what it is, who it\'s built for, and the philosophy behind Pakistan\'s warmest school management system.',
    date: 'April 22, 2026', read: '5 min',
    grad: 'linear-gradient(135deg, #e8798e, #3f8cab)', img: 'assets/blogs-images/4.png',
    content: [
      { type: 'p', text: 'We built it. Alhamdullillah. My very first idea is now a reality — a working product, used by real schools, with real families across Karachi receiving real updates about their children. I have tears in my eyes as I write this, because I know exactly how many late nights this took.' },
      { type: 'h2', text: 'What School Connect Actually Is' },
      { type: 'p', text: 'School Connect is a school management system — but with a completely different philosophy from anything else available in Pakistan today.' },
      { type: 'p', text: 'Traditionally, systems like these are built for school administration: they digitise operations, reduce paperwork, and give principals a dashboard. They work from the inside out. School Connect works from the outside in — designed first for the experience of the parent at home, then built backwards to support the teacher in the classroom and the administrator in the office.' },
      { type: 'h2', text: 'Because This Isn\'t Just About Managing Schools — It\'s About Building Connections.' },
      { type: 'p', text: 'I believe a school system shouldn\'t feel like a cold administrative tool. It should feel like a thoughtful partner — one that sits quietly in the background of school life, surfaces what matters when it matters, and stays out of the way the rest of the time.' },
      { type: 'h2', text: 'Built for Every Stakeholder' },
      {
        type: 'list', items: [
          'For parents who want to feel their child\'s progress, not just receive information about it — to see their growth, their classroom moments, their homework and attendance, all in one trusted place with notifications they can rely on.',
          'For teachers who spend between one and two hours every day on administrative tasks that, with the right tool, could take fifteen minutes — so they can give that time back to teaching and to their students.',
          'For school management that needs operational clarity: fee collection rates, attendance patterns, parent engagement — all visible at a glance, without pulling data from three different systems.',
        ]
      },
      { type: 'p', text: 'I designed School Connect with emotions at its core. The emotion of a parent who worries whether their child is happy at school. The emotion of a teacher who loves their students but is drowning in admin. The emotion of a school leader trying to hold everything together while also moving their institution forward.' },
      { type: 'quote', text: 'School Connect is not just software. It is a shift in how schools, parents, and teachers come together around what truly matters — the children. So let\'s connect with School Connect.' },
    ]
  },
];

// ============ BLOG PAGE ============
const BlogPage = () => {
  const [filter, setFilter] = React.useState('All');
  const filters = ['All', 'Founders'];
  const posts = BLOG_POSTS;
  const filtered = filter === 'All' ? posts : posts.filter(p => p.tag === filter);
  const [feat, ...rest] = filtered;

  return (
    <>
      <Nav current="blog" />
      <PageHero
        eyebrow="Writing"
        title="Notes from the line<br/>between <em>home and school.</em>"
        lede="Stories, case studies and thoughts from our team and the schools we work with across Karachi."
      />
      <section className="blog-page">
        <div className="wrap">


          {feat && (
            <a href={`blog-post.html?slug=${feat.slug}`} className="blog-featured">
              <div className="blog-feat-body">
                <div className={`tag ${feat.tagColor}`}>{feat.tag} · Featured</div>
                <h2>{feat.title}</h2>
                <p>{feat.desc}</p>
                <div className="blog-meta">{feat.date} · {feat.read} read</div>
                <div className="blog-read-link">Read article →</div>
              </div>
            </a>
          )}

          <div className="blog-grid">
            {rest.map((p, i) => (
              <a key={i} href={`blog-post.html?slug=${p.slug}`} className="blog-card">
                <div className="blog-card-body">
                  <div className={`tag ${p.tagColor}`}>{p.tag}</div>
                  <h3>{p.title}</h3>
                  <p>{p.desc}</p>
                  <div className="blog-meta">{p.date} · {p.read} read</div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
      <Footer />
    </>
  );
};

// ============ BLOG POST PAGE ============
const BlogPostPage = () => {
  const slug = new URLSearchParams(window.location.search).get('slug');
  const post = BLOG_POSTS.find(p => p.slug === slug);
  const related = BLOG_POSTS.filter(p => p.slug !== slug).slice(0, 3);

  React.useEffect(() => {
    if (!post) return;
    document.title = `${post.title} — School Connect`;
    const setMeta = (sel, content) => { const el = document.querySelector(sel); if (el) el.setAttribute('content', content); };
    setMeta('meta[name="description"]', post.desc);
    setMeta('meta[property="og:title"]', `${post.title} — School Connect`);
    setMeta('meta[property="og:description"]', post.desc);
    setMeta('meta[name="twitter:title"]', `${post.title} — School Connect`);
    setMeta('meta[name="twitter:description"]', post.desc);
    const canonical = document.querySelector('link[rel="canonical"]');
    if (canonical) canonical.setAttribute('href', `https://www.theschoolconnect.com/blog-post.html?slug=${post.slug}`);
  }, [post]);

  if (!post) {
    return (
      <>
        <Nav current="blog" />
        <section className="page-hero">
          <div className="wrap page-hero-inner">
            <div className="eyebrow">404</div>
            <h1 className="display">Post <em>not found.</em></h1>
            <p>That article doesn't exist — <a href="blog.html" style={{ color: 'var(--mustard-ink)' }}>back to the blog</a>.</p>
          </div>
        </section>
        <Footer />
      </>
    );
  }

  const renderBlock = (block, i) => {
    switch (block.type) {
      case 'h2':
        return <h2 key={i} className="post-h2">{block.text}</h2>;
      case 'p':
        return <p key={i} className="post-p">{block.text}</p>;
      case 'quote':
        return <blockquote key={i} className="post-quote">{block.text}</blockquote>;
      case 'list':
        return (
          <ul key={i} className="post-list">
            {block.items.map((item, j) => <li key={j}>{item}</li>)}
          </ul>
        );
      case 'bold-italic':
        return <p key={i} className="post-p"><strong><em>{block.text}</em></strong></p>;
      case 'italic':
        return <p key={i} className="post-p"><em>{block.text}</em></p>;
      default:
        return null;
    }
  };

  return (
    <>
      <Nav current="blog" />

      <section className="post-hero">
        <div className="wrap post-hero-inner">
          <a href="blog.html" className="post-back">← All posts</a>
          <div className={`tag ${post.tagColor}`} style={{ marginBottom: 20, display: 'inline-block' }}>{post.tag}</div>
          <h1 className="post-title">{post.title}</h1>
          <div className="post-meta-row">
            <span>{post.date}</span>
            <span className="post-meta-dot">·</span>
            <span>{post.read} read</span>
          </div>
        </div>
      </section>

      <section className="post-body-section">
        <div className="wrap">
          <div className="post-body">
            <p className="post-lede">{post.desc}</p>
            {post.content.map((block, i) => renderBlock(block, i))}
          </div>

          <div className="post-author-row">
            <img src="assets/Navaid.jpg" alt="Eifa Navaid" className="post-author-img" />
            <div>
              <div className="post-author-name">Eifa Navaid</div>
              <div className="post-author-role">Founder & CEO, School Connect</div>
            </div>
          </div>
        </div>
      </section>

      {related.length > 0 && (
        <section className="post-related">
          <div className="wrap">
            <div className="post-related-head">More from the blog</div>
            <div className="blog-grid">
              {related.map((p, i) => (
                <a key={i} href={`blog-post.html?slug=${p.slug}`} className="blog-card">
                  <div className="blog-card-body">
                    <div className={`tag ${p.tagColor}`}>{p.tag}</div>
                    <h3>{p.title}</h3>
                    <p>{p.desc}</p>
                    <div className="blog-meta">{p.date} · {p.read} read</div>
                  </div>
                </a>
              ))}
            </div>
          </div>
        </section>
      )}

      <Footer />
    </>
  );
};

// ============ DEMO PAGE ============
// Replace this with your Formspree form ID.
// Sign up free at https://formspree.io → New Form → copy the ID from the endpoint URL.
const FORMSPREE_ID = 'xpqkdgpn';

const DemoPage = () => {
  const [form, setForm] = React.useState({ name: '', email: '', phone: '', school: '', role: 'Principal / Owner', size: '100-300', when: '', notes: '' });
  const [submitted, setSubmitted] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [sendError, setSendError] = React.useState('');
  const sizes = ['<100', '100-300', '300-700', '700+'];
  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const handleSubmit = async (e) => {
    e.preventDefault();
    setSending(true);
    setSendError('');
    try {
      const res = await fetch(`https://formspree.io/f/${FORMSPREE_ID}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify({
          name: form.name,
          email: form.email,
          phone: form.phone,
          school: form.school,
          role: form.role,
          school_size: form.size + ' students',
          notes: form.notes,
          _subject: `Demo request from ${form.school} — School Connect`,
          _replyto: form.email,
        }),
      });
      const data = await res.json();
      if (res.ok && data.ok) {
        setSubmitted(true);
      } else {
        setSendError(data.error || 'Something went wrong. Please email us directly at letstalk@theschoolconnect.com');
      }
    } catch (_) {
      setSendError('Could not send — please email us directly at letstalk@theschoolconnect.com');
    } finally {
      setSending(false);
    }
  };

  return (
    <>
      <Nav hideCta={true} />
      <section className="demo-page">
        <div className="wrap">
          <div className="demo-layout">
            <div className="demo-left">
              <div className="eyebrow">Book a demo</div>
              <h1 className="display" style={{ marginTop: 20 }}>
                Thirty minutes.<br /><em>Zero pressure.</em>
              </h1>
              <p className="lede">
                We'll walk you through School Connect with your school's actual
                structure in mind — classes, fees, families. If it fits, brilliant.
                If it doesn't, you'll have a clearer picture of what you need.
              </p>
              <ul className="demo-features">
                <li>
                  <div className="d-icon" style={{ background: 'rgba(232,121,142,0.15)', color: 'var(--coral-ink)' }}>01</div>
                  <div className="d-text"><strong>30-minute guided walkthrough</strong><small>Admin portal + parent app, live on Zoom or in person.</small></div>
                </li>
                <li>
                  <div className="d-icon" style={{ background: 'rgba(232,169,74,0.15)', color: 'var(--mustard-ink)' }}>02</div>
                  <div className="d-text"><strong>We do our homework</strong><small>Share your setup when you book — we'll shape the walkthrough around what actually matters to you.</small></div>
                </li>
                <li>
                  <div className="d-icon" style={{ background: 'rgba(63,140,171,0.2)', color: 'var(--teal-ink)' }}>03</div>
                  <div className="d-text"><strong>Honest pricing upfront</strong><small>You'll leave knowing exactly what it costs and what's included.</small></div>
                </li>
                <li>
                  <div className="d-icon" style={{ background: 'rgba(244,234,213,0.1)', color: 'var(--cream)' }}>04</div>
                  <div className="d-text"><strong>First month free, always</strong><small>If you move forward, your first month is on us.</small></div>
                </li>
              </ul>
            </div>

            <div className="demo-form">
              {!submitted ? (
                <form onSubmit={handleSubmit}>
                  <h3>Tell us about your school</h3>
                  <p className="sub">We'll reach out within 24 hours to set up a time.</p>

                  <div className="field-row">
                    <div className="field">
                      <label>Your name</label>
                      <input required type="text" value={form.name} onChange={e => update('name', e.target.value)} placeholder="Aamir Rahim" />
                    </div>
                    <div className="field">
                      <label>Your role</label>
                      <select value={form.role} onChange={e => update('role', e.target.value)}>
                        <option>Principal / Owner</option>
                        <option>Vice Principal</option>
                        <option>Head of Administration</option>
                        <option>IT / Digital Lead</option>
                        <option>Other</option>
                      </select>
                    </div>
                  </div>

                  <div className="field">
                    <label>School name</label>
                    <input required type="text" value={form.school} onChange={e => update('school', e.target.value)} placeholder="The School" />
                  </div>

                  <div className="field-row">
                    <div className="field">
                      <label>Email</label>
                      <input required type="email" value={form.email} onChange={e => update('email', e.target.value)} placeholder="principal@school.edu.pk" />
                    </div>
                    <div className="field">
                      <label>Phone</label>
                      <input required type="tel" value={form.phone} onChange={e => update('phone', e.target.value)} placeholder="+92 300 0000000" />
                    </div>
                  </div>

                  <div className="field">
                    <label>School size</label>
                    <div className="size-chips">
                      {sizes.map(s => (
                        <button type="button" key={s} className={`size-chip ${form.size === s ? 'on' : ''}`} onClick={() => update('size', s)}>{s} students</button>
                      ))}
                    </div>
                  </div>

                  <div className="field">
                    <label>Anything we should know?</label>
                    <textarea value={form.notes} onChange={e => update('notes', e.target.value)} placeholder="Current system, biggest pain points, must-haves..."></textarea>
                  </div>

                  <button type="submit" className="btn btn-primary btn-lg demo-submit" disabled={sending}>
                    {sending ? 'Sending…' : 'Request demo →'}
                  </button>
                  {sendError && (
                    <div style={{ marginTop: 12, padding: '10px 14px', background: 'rgba(232,121,142,0.1)', border: '1px solid rgba(232,121,142,0.25)', borderRadius: 8, fontSize: 13, color: 'var(--coral-ink)', lineHeight: 1.5 }}>
                      {sendError}
                    </div>
                  )}
                  <div style={{ textAlign: 'center', marginTop: 14, fontSize: 12, color: 'var(--ink-dim)' }}>
                    We'll never share your details.
                  </div>
                </form>
              ) : (
                <div className="demo-success">
                  <div className="check-big">✓</div>
                  <h2>Request received, {form.name.split(' ')[0] || 'friend'}!</h2>
                  <p>We'll reach out to <strong style={{ color: 'var(--cream)' }}>{form.email || 'you'}</strong> within 24 hours to set up your demo. While you wait, feel free to <a href="features.html" style={{ color: 'var(--mustard-ink)' }}>browse the features</a>.</p>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>
      <Footer />
    </>
  );
};

// ============ BLOG COMING SOON ============
const BlogComingSoon = () => (
  <>
    <Nav current="blog" />
    <section className="page-hero">
      <div className="wrap page-hero-inner">
        <div className="eyebrow">Writing</div>
        <h1 className="display">Something worth reading<br />is <em>on its way.</em></h1>
        <p>
          We're working on stories, case studies and honest thoughts about school communication in Pakistan.
          Check back soon — or get in touch and we'll let you know when the first piece lands.
        </p>
        <div style={{ marginTop: 36, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
          <a href="contact.html" className="btn btn-primary">Book a demo →</a>
          <a href="mailto:letstalk@theschoolconnect.com" className="btn btn-ghost">letstalk@theschoolconnect.com</a>
        </div>
      </div>
    </section>
    <Footer />
  </>
);

// ============ LEGAL PAGES ============
const legalSectionStyle = {
  maxWidth: 720,
  margin: '0 auto',
  padding: '60px 0 100px',
};
const legalH2Style = {
  fontSize: 15,
  fontWeight: 700,
  color: 'var(--cream)',
  marginTop: 40,
  marginBottom: 8,
  textTransform: 'uppercase',
  letterSpacing: '0.06em',
};
const legalPStyle = {
  fontSize: 15,
  color: 'var(--ink-muted)',
  lineHeight: 1.7,
  marginBottom: 10,
};
const legalLiStyle = {
  fontSize: 15,
  color: 'var(--ink-muted)',
  lineHeight: 1.7,
  marginLeft: 20,
  marginBottom: 4,
};

const PrivacyPage = () => (
  <>
    <Nav />
    <section className="page-hero">
      <div className="wrap page-hero-inner">
        <div className="eyebrow">Legal</div>
        <h1 className="display">Privacy <em>Policy</em></h1>
        <p style={{ marginTop: 12, color: 'var(--ink-muted)' }}>Effective Date: 1st April, 2026</p>
      </div>
    </section>
    <section style={{ paddingTop: 0 }}>
      <div className="wrap">
        <div style={legalSectionStyle}>
          <p style={legalPStyle}>School Connect ("we", "our", "us") is committed to protecting the privacy and security of its users. This Privacy Policy explains how we collect, use, disclose, and safeguard information when you use our platform.</p>

          <h2 style={legalH2Style}>1. Information We Collect</h2>
          <p style={legalPStyle}>We may collect the following types of information:</p>
          <ul style={{ listStyle: 'disc', paddingLeft: 20 }}>
            {['School information (name, contact details)', 'User information (teachers, parents, staff)', 'Student information (name, attendance, academic records)', 'Communication data (messages, notifications)', 'Device and usage data'].map((item, i) => <li key={i} style={legalLiStyle}>{item}</li>)}
          </ul>

          <h2 style={legalH2Style}>2. How We Use Information</h2>
          <p style={legalPStyle}>We use the collected data to:</p>
          <ul style={{ listStyle: 'disc', paddingLeft: 20 }}>
            {['Provide and maintain our services', 'Improve platform functionality', 'Enable communication between users', 'Ensure security and prevent misuse'].map((item, i) => <li key={i} style={legalLiStyle}>{item}</li>)}
          </ul>

          <h2 style={legalH2Style}>3. Data Ownership</h2>
          <p style={legalPStyle}>All data entered into School Connect remains the property of the School. We act as a data processor.</p>

          <h2 style={legalH2Style}>4. Children's Privacy</h2>
          <p style={legalPStyle}>We handle student data under the authority of the School. Schools are responsible for obtaining parental consent.</p>

          <h2 style={legalH2Style}>5. Data Sharing</h2>
          <p style={legalPStyle}>We do not sell user data. Data may be shared with:</p>
          <ul style={{ listStyle: 'disc', paddingLeft: 20 }}>
            {['Service providers (hosting, messaging)', 'Legal authorities if required by law'].map((item, i) => <li key={i} style={legalLiStyle}>{item}</li>)}
          </ul>

          <h2 style={legalH2Style}>6. Data Security</h2>
          <p style={legalPStyle}>We implement reasonable safeguards, but no system is completely secure.</p>

          <h2 style={legalH2Style}>7. Data Retention</h2>
          <p style={legalPStyle}>We retain data as long as necessary to provide services and comply with legal obligations.</p>

          <h2 style={legalH2Style}>8. User Rights</h2>
          <p style={legalPStyle}>Schools may request access, correction, or deletion of their data.</p>

          <h2 style={legalH2Style}>9. Third-Party Services</h2>
          <p style={legalPStyle}>We are not responsible for third-party services integrated with the platform.</p>

          <h2 style={legalH2Style}>10. Updates to Policy</h2>
          <p style={legalPStyle}>We may update this Privacy Policy. Continued use means acceptance.</p>

          <h2 style={legalH2Style}>11. Contact Us</h2>
          <p style={legalPStyle}>
            Email: <a href="mailto:letstalk@theschoolconnect.com" style={{ color: 'var(--mustard-ink)' }}>letstalk@theschoolconnect.com</a><br />
            Phone: <a href="tel:+923710127787" style={{ color: 'var(--mustard-ink)' }}>+92 371 012 7787</a><br />
            Address: Karachi, Pakistan
          </p>
        </div>
      </div>
    </section>
    <Footer />
  </>
);

const TermsPage = () => (
  <>
    <Nav />
    <section className="page-hero">
      <div className="wrap page-hero-inner">
        <div className="eyebrow">Legal</div>
        <h1 className="display">Terms &amp; <em>Conditions</em></h1>
        <p style={{ marginTop: 12, color: 'var(--ink-muted)' }}>Effective Date: 1st April, 2026</p>
      </div>
    </section>
    <section style={{ paddingTop: 0 }}>
      <div className="wrap">
        <div style={legalSectionStyle}>
          <p style={legalPStyle}>Welcome to School Connect. These Terms &amp; Conditions ("Terms") govern your use of our website, mobile application, and services (collectively, the "Platform"). By accessing or using School Connect, you agree to be bound by these Terms.</p>

          <h2 style={legalH2Style}>1. About School Connect</h2>
          <p style={legalPStyle}>School Connect is a digital platform designed to help schools manage administrative operations, reduce teacher workload, and facilitate communication between schools, teachers, and parents.</p>

          <h2 style={legalH2Style}>2. Definitions</h2>
          <p style={legalPStyle}>"School" refers to the institution subscribing to and using School Connect. "User" refers to any individual accessing the platform, including administrators, teachers, parents, or staff. "Content" refers to any data, text, messages, images, or information uploaded to the platform.</p>

          <h2 style={legalH2Style}>3. Acceptance of Terms</h2>
          <p style={legalPStyle}>By using School Connect, you confirm that:</p>
          <ul style={{ listStyle: 'disc', paddingLeft: 20 }}>
            {['You have the authority to act on behalf of your institution (if applicable)', 'You agree to comply with these Terms and all applicable laws'].map((item, i) => <li key={i} style={legalLiStyle}>{item}</li>)}
          </ul>

          <h2 style={legalH2Style}>4. User Accounts &amp; Responsibilities</h2>
          <ul style={{ listStyle: 'disc', paddingLeft: 20 }}>
            {['Schools are responsible for creating and managing user accounts.', 'Users must maintain the confidentiality of login credentials.', 'Schools are responsible for all activities conducted under their accounts.', 'Users must provide accurate and complete information.'].map((item, i) => <li key={i} style={legalLiStyle}>{item}</li>)}
          </ul>

          <h2 style={legalH2Style}>5. Acceptable Use Policy</h2>
          <p style={legalPStyle}>Users agree not to:</p>
          <ul style={{ listStyle: 'disc', paddingLeft: 20 }}>
            {['Use the platform for any unlawful or harmful activity', 'Upload or share abusive, defamatory, or inappropriate content', 'Harass or misuse communication features', 'Attempt to hack, disrupt, or reverse-engineer the system'].map((item, i) => <li key={i} style={legalLiStyle}>{item}</li>)}
          </ul>

          <h2 style={legalH2Style}>6. Data Ownership &amp; Usage</h2>
          <ul style={{ listStyle: 'disc', paddingLeft: 20 }}>
            {['All data entered into the platform remains the property of the School.', 'School Connect acts as a service provider and data processor.', 'We do not sell or commercially exploit user data.'].map((item, i) => <li key={i} style={legalLiStyle}>{item}</li>)}
          </ul>

          <h2 style={legalH2Style}>7. Children's Data</h2>
          <ul style={{ listStyle: 'disc', paddingLeft: 20 }}>
            {["Schools are responsible for obtaining necessary parental/guardian consent.", "Schools confirm they have legal authority to upload and manage student data."].map((item, i) => <li key={i} style={legalLiStyle}>{item}</li>)}
          </ul>

          <h2 style={legalH2Style}>8. Privacy &amp; Security</h2>
          <p style={legalPStyle}>We implement reasonable measures to protect data but cannot guarantee absolute security.</p>

          <h2 style={legalH2Style}>9. Payments &amp; Subscriptions</h2>
          <ul style={{ listStyle: 'disc', paddingLeft: 20 }}>
            {['Subscription fees may apply.', 'Failure to pay may result in suspension.', 'Fees are non-refundable unless stated otherwise.'].map((item, i) => <li key={i} style={legalLiStyle}>{item}</li>)}
          </ul>

          <h2 style={legalH2Style}>10. Service Availability</h2>
          <p style={legalPStyle}>We do not guarantee uninterrupted or error-free service.</p>

          <h2 style={legalH2Style}>11. Communication Disclaimer</h2>
          <p style={legalPStyle}>School Connect is not responsible for the content or delivery of communications between users.</p>

          <h2 style={legalH2Style}>12. Limitation of Liability</h2>
          <p style={legalPStyle}>School Connect is not liable for errors, miscommunication, or decisions made using the platform.</p>

          <h2 style={legalH2Style}>13. Data Backup &amp; Retention</h2>
          <p style={legalPStyle}>We perform backups but do not guarantee full recovery.</p>

          <h2 style={legalH2Style}>14. Termination</h2>
          <p style={legalPStyle}>We may suspend or terminate accounts for violations or non-payment.</p>

          <h2 style={legalH2Style}>15. Intellectual Property</h2>
          <p style={legalPStyle}>All platform rights belong to School Connect.</p>

          <h2 style={legalH2Style}>16. Updates to Terms</h2>
          <p style={legalPStyle}>We may update these Terms. Continued use means acceptance.</p>

          <h2 style={legalH2Style}>17. Governing Law</h2>
          <p style={legalPStyle}>These Terms are governed by the laws of Pakistan, with exclusive jurisdiction of the courts of Karachi.</p>

          <h2 style={legalH2Style}>18. Contact</h2>
          <p style={legalPStyle}>
            Email: <a href="mailto:letstalk@theschoolconnect.com" style={{ color: 'var(--mustard-ink)' }}>letstalk@theschoolconnect.com</a><br />
            Phone: <a href="tel:+923710127787" style={{ color: 'var(--mustard-ink)' }}>+92 371 012 7787</a><br />
            Address: Karachi, Pakistan
          </p>
        </div>
      </div>
    </section>
    <Footer />
  </>
);

window.PageHero = PageHero;
window.BlogComingSoon = BlogComingSoon;
window.FeaturesPage = FeaturesPage;
window.PricingPage = PricingPage;
window.AboutPage = AboutPage;
window.BlogPage = BlogPage;
window.BlogPostPage = BlogPostPage;
window.DemoPage = DemoPage;
window.PrivacyPage = PrivacyPage;
window.TermsPage = TermsPage;