// Content pages: Story, Craft, Journal, FAQ, Sizing, Care, Contact
const { useState } = React;

// ─── Shared layout helper ────────────────────────────────────────────────────
function PageHero({ eyebrow, urdu, title, lead }) {
  return (
    <div className="page-hero">
      <div className="container">
        {urdu && <div className="pre" style={{ marginBottom: 6 }}>{urdu}</div>}
        {eyebrow && <div className="eyebrow-gold" style={{ marginBottom: 12 }}>{eyebrow}</div>}
        <h1 className="display" style={{ fontWeight: 400, margin: '0 0 20px' }}>{title}</h1>
        {lead && <p className="page-lead" style={{ fontSize: 18, color: 'var(--color-text-soft)', maxWidth: 680, lineHeight: 1.7 }}>{lead}</p>}
      </div>
    </div>
  );
}

// ─── ABOUT PAGE ──────────────────────────────────────────────────────────────
function AboutPage() {
  const { navigate } = useStore();
  return (
    <div className="content-page">
      <PageHero
        urdu="ہمارے بارے میں"
        eyebrow="About Saancha"
        title={<>Handmade Leather <em>from the Margalla Foothills</em></>}
        lead="Saancha Shoes is an Islamabad-based leather workshop crafting handmade shoes for people who value the last over the line, the stitch over the stamp, and the maker over the machine."
      />

      <section className="section" style={{ paddingTop: 56 }}>
        <div className="container">
          <div className="editorial-split">
            <div className="img-wrap" style={{ background: 'var(--color-paper-2)', borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 360, overflow: 'hidden' }}>
              <div style={{ textAlign: 'center', padding: 40 }}>
                <div className="eyebrow-gold" style={{ marginBottom: 8 }}>Est. 2026</div>
                <div style={{ fontSize: 48, fontFamily: 'var(--font-serif)', color: 'var(--color-accent)' }}>سانچہ</div>
                <div style={{ marginTop: 12, fontSize: 13, letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--color-text-mute)' }}>Saancha Shoes</div>
              </div>
            </div>
            <div>
              <div className="eyebrow-gold">The Name</div>
              <h2 style={{ fontWeight: 400, margin: '8px 0 20px' }}>سانچہ — the wooden last that shapes every shoe</h2>
              <p style={{ color: 'var(--color-text-soft)', lineHeight: 1.75, marginBottom: 16 }}>
                In Urdu, <em>saancha</em> (سانچہ) means a mold or a last — the carved wooden form around which a shoemaker builds the shoe. It is the first tool, the hidden foundation. Without a good last, the finest leather and the neatest stitching produce a shoe that hurts by noon. With a good last, the shoe disappears into the foot.
              </p>
              <p style={{ color: 'var(--color-text-soft)', lineHeight: 1.75, marginBottom: 16 }}>
                We chose this name deliberately. Everything we make begins with the last. Ten designs, each refined on its own form over months of wear testing across Islamabad's streets — from the stone pavements of F-7 Markaz to the monsoon-soaked lanes of E-11. We do not add designs for catalogue breadth. Ten is the number we can make honestly.
              </p>
              <p style={{ color: 'var(--color-text-soft)', lineHeight: 1.75, marginBottom: 28 }}>
                Saancha operates from a workshop in E11/2, Islamabad, under OCEANNET (SMC-PRIVATE) LIMITED. Our leather comes from Pakistani tanneries — Kasur for goat, Sialkot for finishing-grade calf. Every pair is cut, lasted, welted, and finished by hand. A single pair takes approximately three days from cutting table to final polish.
              </p>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <button className="btn btn-primary" onClick={() => navigate({ name: 'page', slug: 'story' })}>Read Our Story</button>
                <button className="btn btn-outline" onClick={() => navigate({ name: 'page', slug: 'craft' })}>The Making Process</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--color-paper-2)', paddingTop: 64, paddingBottom: 64 }}>
        <div className="container">
          <div className="section-head">
            <div className="divider-orn">✦ Our Principles ✦</div>
            <h2 style={{ marginTop: 12, fontWeight: 400 }}>What we stand for</h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 32, marginTop: 40 }}>
            {[
              { icon: <Ic.needle />, title: 'Ten Designs, No More', body: 'Every design earns its place on our lasts. We do not chase trends or seasons. A shoe that was right in March is right in October.' },
              { icon: <Ic.shield />, title: 'Three Days Per Pair', body: 'From cutting to finishing, each pair takes roughly three days of hand work. We do not rush. The leather needs time to settle on the last.' },
              { icon: <Ic.award />, title: 'Pakistani Leather', body: 'Our hides come from tanneries in Kasur and Sialkot — regions with leather-working traditions that predate the Pakistan we know today.' },
              { icon: <Ic.gem />, title: 'Craft Over Mass Production', body: 'We produce in small batches. When a run sells out, the next run begins. We will not compromise a last to speed up delivery.' },
            ].map((p, i) => (
              <div key={i} style={{ padding: '28px 24px', background: 'var(--color-surface)', borderRadius: 4, border: '1px solid var(--color-border)' }}>
                <div style={{ color: 'var(--color-accent)', marginBottom: 12 }}>{p.icon}</div>
                <div style={{ fontFamily: 'var(--font-serif)', fontSize: 17, marginBottom: 10 }}>{p.title}</div>
                <p style={{ color: 'var(--color-text-soft)', fontSize: 14, lineHeight: 1.7, margin: 0 }}>{p.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container" style={{ maxWidth: 760 }}>
          <div className="editorial-quote">
            A well-made shoe should feel invisible by the end of the first week — so natural you stop noticing you are wearing it. That is when we know the last was right.
          </div>
          <div style={{ textAlign: 'center', marginTop: 20, fontSize: 13, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--color-text-mute)' }}>— Mohammad Gulfam, Director, Saancha Shoes</div>
        </div>
      </section>

      <section className="section" style={{ paddingBottom: 80 }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <div className="eyebrow-gold" style={{ marginBottom: 16 }}>Visit Us</div>
          <h2 style={{ fontWeight: 400, marginBottom: 16 }}>FA32, Crown Business Center</h2>
          <p style={{ color: 'var(--color-text-soft)', maxWidth: 480, margin: '0 auto 28px' }}>
            E11/2, Islamabad<br />
            <a href="mailto:hello@saanchashoes.shop" style={{ color: 'var(--color-accent)' }}>hello@saanchashoes.shop</a> &nbsp;·&nbsp; +92 51 272 8463
          </p>
          <button className="btn btn-primary btn-lg" onClick={() => navigate({ name: 'page', slug: 'contact' })}>Write to Us</button>
        </div>
      </section>
    </div>
  );
}

// ─── STORY PAGE ───────────────────────────────────────────────────────────────
function StoryPage() {
  const { navigate } = useStore();
  const chapters = [
    {
      year: '2024',
      eyebrow: 'The shoemaker in the lane',
      title: 'A workshop in E11',
      body: `Mohammad Gulfam first met Ustad Rasheed in a narrow lane of E11/2, Islamabad, in the winter of 2024. Rasheed had been making shoes for thirty-two years — first as an apprentice in Sialkot's sports-goods quarter, then as a pattern cutter for a Lahore export house, and finally from his own two-room workshop where he made bespoke footwear for a handful of clients who knew his number. The workshop smelled of leather dust, neatsfoot oil, and the faint sweetness of contact cement. Gulfam ordered a pair of oxfords. They took eleven days. He wore them for a year. They were the best shoes he had ever owned.`,
    },
    {
      year: '2025',
      eyebrow: 'The idea takes shape',
      title: 'Ten lasts, one workshop',
      body: `Through 2025, Gulfam and Rasheed worked together on evenings and weekends, refining ten designs on ten wooden lasts. The last — the saancha — became their shared vocabulary. A millimetre of toe spring altered the entire gait. A heel pitch of three millimetres was the difference between a shoe that slipped and a shoe that held. They tested each design on pavement, on gravel, on the polished marble of F-7 drawing rooms, and on the uneven brick of Saidpur village lanes. The patterns they kept were the ones that worked everywhere.`,
    },
    {
      year: 'Early 2026',
      eyebrow: 'Building the chain',
      title: 'Leather from Kasur, finishing in Sialkot',
      body: `The leather supply chain took six months to lock. Goat hides from Kasur tanneries — vegetable-tanned, full-grain, dyed in small drums rather than continuous baths. Calf leather from Sialkot for the oxfords and derby shoes, where the tighter grain structure holds a polish better. Every hide is inspected by hand before it reaches the cutting table. Hides with scars, brand marks, or uneven dye absorption are returned or graded down to smaller components — heel counters, tongue linings, sock liners. Nothing is wasted.`,
    },
    {
      year: 'March 2026',
      eyebrow: 'Going live',
      title: 'Saancha opens its doors',
      body: `OCEANNET (SMC-PRIVATE) LIMITED was formally incorporated on 02 March 2026, and Saancha Shoes opened for orders on saanchashoes.shop. The first run was thirty pairs across three designs — two oxfords and a derby. They sold out in nine days. The second run was sixty pairs. The workshop pace settled at roughly three days per pair: one day for cutting and assembling the upper, one day for lasting and welting, one day for sole attachment, edge finishing, and final polish.`,
    },
  ];

  return (
    <div className="content-page">
      <PageHero
        urdu="ہماری کہانی"
        eyebrow="Our Story"
        title={<>How a Shoemaker's <em>Last</em> Became a Brand</>}
        lead="Saancha is new as a company. But the craft behind it — the hand-skiving, the bench-made welting, the wooden lasts shaped by a man who has made shoes for thirty-two years — that goes back decades."
      />

      <section className="section" style={{ paddingTop: 56, paddingBottom: 80 }}>
        <div className="container" style={{ maxWidth: 800 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 64 }}>
            {chapters.map((ch, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '100px 1fr', gap: '0 40px', alignItems: 'start' }}>
                <div style={{ paddingTop: 6, textAlign: 'right' }}>
                  <div style={{ fontFamily: 'var(--font-serif)', fontSize: 15, color: 'var(--color-accent)', lineHeight: 1.2 }}>{ch.year}</div>
                  <div style={{ width: 1, height: 48, background: 'var(--color-border)', margin: '10px auto 0', position: 'relative', left: '50%', transform: i < chapters.length - 1 ? 'none' : 'scaleY(0)' }} />
                </div>
                <div>
                  <div className="eyebrow-gold" style={{ marginBottom: 8 }}>{ch.eyebrow}</div>
                  <h3 style={{ fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 22, margin: '0 0 14px' }}>{ch.title}</h3>
                  <p style={{ color: 'var(--color-text-soft)', lineHeight: 1.8, margin: 0 }}>{ch.body}</p>
                </div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 64, padding: '36px 40px', background: 'var(--color-paper-2)', borderLeft: '3px solid var(--color-accent)', borderRadius: 2 }}>
            <p style={{ color: 'var(--color-text-soft)', lineHeight: 1.8, margin: 0, fontSize: 16 }}>
              The workshop in E11/2 is the same workshop that produced the first pair Gulfam ordered in 2024. Ustad Rasheed still cuts the patterns. The lasts are the same ten lasts, refined over two years of wear testing. Every pair of Saancha shoes sold on this site is made in that workshop, by those hands. This is not a marketing story. It is the only way we know how to make shoes.
            </p>
          </div>

          <div style={{ marginTop: 48, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
            <button className="btn btn-primary" onClick={() => navigate({ name: 'page', slug: 'craft' })}>The Making Process</button>
            <button className="btn btn-outline" onClick={() => navigate({ name: 'page', slug: 'care' })}>Care Guide</button>
          </div>
        </div>
      </section>
    </div>
  );
}

// ─── CRAFT PAGE ───────────────────────────────────────────────────────────────
function CraftPage() {
  const { navigate } = useStore();
  const steps = [
    {
      step: '01',
      title: 'Last Design & Pattern Making',
      time: 'Foundation',
      body: `Every Saancha shoe begins with the last — the carved wooden form shaped to the exact contours of a human foot at a specific size. Ustad Rasheed's lasts are carved from sheesham wood (rosewood), chosen for its dimensional stability across Islamabad's hot summers and cold winters. The pattern — the flat template for each leather piece of the upper — is drafted on card stock, tested on scrap leather, adjusted, and tested again. A new design typically goes through four to six pattern revisions before the first wearable pair exists.`,
    },
    {
      step: '02',
      title: 'Leather Selection & Cutting',
      time: 'Day 1, morning',
      body: `Hides arrive from Kasur (goat) and Sialkot (calf). Each hide is inspected under natural light for grain consistency, scar placement, and dye uniformity. The clicker — the person who cuts the leather — positions each pattern piece to avoid scars and stretch marks, following the natural grain direction. The upper pieces are cut with a hand knife; the linings in softer kip leather. Off-cuts are sorted by size: larger pieces become heel counters and tongue linings; smaller pieces go to a local crafts training programme.`,
    },
    {
      step: '03',
      title: 'Upper Assembly & Stitching',
      time: 'Day 1, afternoon – Day 2, morning',
      body: `The cut pieces are skived (thinned at the edges) by hand so that overlapping seams lie flat against the foot. The upper is assembled in sequence: toe cap to vamp, vamp to quarter, quarter to heel. Each seam is folded, glued, and stitched on an industrial walking-foot machine. Eyelets are punched and set by hand. The assembled upper is then soaked briefly in water to relax the fibres before lasting — a critical step that allows the leather to stretch evenly over the last without tearing.`,
    },
    {
      step: '04',
      title: 'Lasting',
      time: 'Day 2, afternoon',
      body: `The damp upper is pulled over the last and tacked in place. The shoemaker works from toe to heel, using lasting pliers to stretch the leather smoothly across the last's curves, pulling out every wrinkle. The upper is then left on the last overnight to dry and take the form of the wood — this is when the shoe acquires its permanent shape. Rushing the lasting produces a shoe that will crease unevenly from the first wear; letting it rest produces a shoe that ages gracefully.`,
    },
    {
      step: '05',
      title: 'Welting & Sole Attachment',
      time: 'Day 3, morning',
      body: `Saancha shoes use a Blake-stitch construction for the oxfords and derbys: the upper, insole, and outsole are stitched together in a single pass from the inside. The stitch is invisible from the outside, giving a clean profile. The outsole — full-grain leather for formal shoes, studded rubber for the workshop derby — is trimmed flush to the upper edge using a curved knife, then the edge is sanded through three grits, dyed, and burnished with beeswax until it has the smooth, sealed look of a polished table edge.`,
    },
    {
      step: '06',
      title: 'Finishing & Inspection',
      time: 'Day 3, afternoon',
      body: `The lasted shoe is removed from the last. The interior is inspected for stray tacks or rough edges. The sock liner — a thin leather insole that covers the Blake stitch — is glued in place. The upper is conditioned, polished, and buffed through two stages: a base cream polish for nourishment, then a wax polish for shine. Each shoe is inspected under oblique light, which reveals surface irregularities invisible under direct light. Shoes that pass are paired, laced, stuffed with acid-free tissue, and placed in their box with a cotton dust bag.`,
    },
  ];

  return (
    <div className="content-page">
      <PageHero
        urdu="دستکاری"
        eyebrow="The Making Process"
        title={<>Three Days to <em>One Pair</em></>}
        lead="Every Saancha shoe passes through six stages across roughly three working days. Here is exactly what happens between the hide arriving at the workshop and the finished pair being placed in its box."
      />

      <section className="section" style={{ paddingTop: 56, paddingBottom: 80 }}>
        <div className="container" style={{ maxWidth: 800 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 48 }}>
            {steps.map((s, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '72px 1fr', gap: '0 32px', alignItems: 'start' }}>
                <div style={{ paddingTop: 4, textAlign: 'right' }}>
                  <div style={{ fontFamily: 'var(--font-serif)', fontSize: 13, color: 'var(--color-text-mute)', letterSpacing: '.1em' }}>{s.step}</div>
                  <div style={{ width: 1, height: 36, background: 'var(--color-border)', margin: '8px auto 0', position: 'relative', left: '50%', transform: i < steps.length - 1 ? 'none' : 'scaleY(0)' }} />
                </div>
                <div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 10 }}>
                    <h3 style={{ fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 20, margin: 0 }}>{s.title}</h3>
                    <span style={{ fontSize: 12, color: 'var(--color-accent)', letterSpacing: '.1em', textTransform: 'uppercase' }}>{s.time}</span>
                  </div>
                  <p style={{ color: 'var(--color-text-soft)', lineHeight: 1.8, margin: 0, fontSize: 15 }}>{s.body}</p>
                </div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 56, padding: '36px 40px', background: 'var(--color-paper-2)', borderLeft: '3px solid var(--color-accent)', borderRadius: 2 }}>
            <p style={{ color: 'var(--color-text-soft)', lineHeight: 1.8, margin: 0, fontSize: 16 }}>
              The workshop produces roughly ten pairs per week. This is not a capacity constraint — it is a deliberate pace. Each pair gets the full three days. We do not add shifts, we do not outsource lasting, and we do not compromise the overnight rest on the last. When a run sells out, the next run begins. You can wait, or you can find a faster shoe elsewhere. We hope you wait.
            </p>
          </div>

          <div style={{ marginTop: 48, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
            <button className="btn btn-primary" onClick={() => navigate({ name: 'page', slug: 'story' })}>Read Our Story</button>
            <button className="btn btn-outline" onClick={() => navigate({ name: 'page', slug: 'care' })}>Care Guide</button>
          </div>
        </div>
      </section>
    </div>
  );
}

// ─── JOURNAL PAGE ─────────────────────────────────────────────────────────────
function JournalPage(props) {
  const { navigate } = useStore();
  return (
    <div className="content-page">
      <PageHero
        urdu="جریدہ"
        eyebrow="The Saancha Journal"
        title={<>Stories from the <em>Workshop Floor</em></>}
        lead="Long reads on leather, shoemaking, materials, and the quiet craft of making things by hand in Islamabad. Coming soon."
      />

      <section className="section" style={{ paddingTop: 56, paddingBottom: 80 }}>
        <div className="container" style={{ maxWidth: 600, textAlign: 'center' }}>
          <div style={{ padding: '64px 24px', background: 'var(--color-paper-2)', borderRadius: 4, border: '1px solid var(--color-border)' }}>
            <div style={{ color: 'var(--color-accent)', marginBottom: 20, display: 'flex', justifyContent: 'center' }}>
              <Ic.needle />
            </div>
            <h3 style={{ fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 22, marginBottom: 12 }}>First entries being written</h3>
            <p style={{ color: 'var(--color-text-soft)', lineHeight: 1.7, marginBottom: 8, fontSize: 15 }}>
              We are documenting the workshop's first year — the hide selections, the last adjustments, the pairs that almost worked and the pairs that did.
            </p>
            <p style={{ color: 'var(--color-text-mute)', fontSize: 14 }}>
              Follow <a href="mailto:hello@saanchashoes.shop" style={{ color: 'var(--color-accent)' }}>hello@saanchashoes.shop</a> to be notified when the first piece drops.
            </p>
          </div>
        </div>
      </section>
    </div>
  );
}

// ─── FAQ PAGE ─────────────────────────────────────────────────────────────────
function FAQPage() {
  const [open, setOpen] = React.useState(null);
  const sections = [
    {
      heading: 'Orders & Shipping',
      items: [
        {
          q: 'How long does delivery take?',
          a: 'Standard delivery is 3–5 business days within Pakistan. Major cities (Islamabad, Lahore, Karachi, Rawalpindi, Peshawar, Faisalabad) typically receive orders in 2–3 business days. We dispatch all confirmed orders within 24 hours on business days.',
        },
        {
          q: 'Is shipping free?',
          a: 'Free shipping is available on all orders above Rs 5,000. For orders below Rs 5,000, a flat shipping fee of Rs 200 applies. Cash on delivery orders carry an additional Rs 49 COD handling charge.',
        },
        {
          q: 'Do you offer Cash on Delivery (COD)?',
          a: 'Yes. COD is available at checkout for orders up to Rs 25,000. Orders above Rs 25,000 must be prepaid via card or bank transfer.',
        },
        {
          q: 'Can I change or cancel my order after placing it?',
          a: "Orders can be modified or cancelled within 24 hours of placement, or before your order moves to 'Packed' status, by writing to hello@saanchashoes.shop with your order number in the subject line.",
        },
        {
          q: 'Do you ship outside Pakistan?',
          a: 'Not currently. International shipping is on our roadmap, beginning with the UAE and UK. Sign up for Journal updates to be notified when it opens.',
        },
      ],
    },
    {
      heading: 'Returns & Refunds',
      items: [
        {
          q: 'What is your return policy?',
          a: 'We accept returns within 14 days of delivery. The shoes must be unworn (tried on indoors on a clean surface only), with original packaging and tags. Write to hello@saanchashoes.shop to initiate a return — we will arrange pickup.',
        },
        {
          q: 'How long does a refund take?',
          a: 'Once we receive and inspect the return, refunds are processed within 3–7 business days depending on payment method. Bank transfers take 3–5 business days; card refunds take 5–7 business days.',
        },
        {
          q: 'The shoes arrived damaged. What do I do?',
          a: 'Photograph the shoes and packaging within 48 hours of receipt and email to hello@saanchashoes.shop. We will arrange a replacement or full refund within 3 business days.',
        },
      ],
    },
    {
      heading: 'Products & Sizing',
      items: [
        {
          q: 'Are Saancha shoes real leather?',
          a: 'Yes. All Saancha shoes are made from full-grain leather — goat leather from Kasur for linings and softer styles, calf leather from Sialkot for oxfords and derbys. We do not use bonded leather, corrected-grain leather, or synthetic materials. Product pages specify the leather type and source.',
        },
        {
          q: 'What sizing standard do you use?',
          a: 'We use UK sizing. See our Size Guide for conversion charts (UK to US, EU, and foot length in cm). When in doubt, measure your foot length in centimetres and match to our chart — this is more reliable than converting from your usual brand.',
        },
        {
          q: 'How should leather shoes fit at first?',
          a: 'Full-grain leather shoes will feel firm — even slightly tight across the instep — for the first 4–6 wears. The leather moulds to your foot as it breaks in. They should never be painful. If your toes are touching the front of the shoe, size up.',
        },
        {
          q: 'Can I request a custom size or width?',
          a: 'Not currently. Our lasts are graded in standard UK widths (F, medium). As we grow, we plan to offer wider fittings on select designs.',
        },
      ],
    },
    {
      heading: 'Account & Payments',
      items: [
        {
          q: 'What payment methods do you accept?',
          a: 'We accept Visa and Mastercard debit/credit cards, bank transfer, and Cash on Delivery. All online transactions are processed over HTTPS with PCI-DSS compliant payment gateways.',
        },
        {
          q: 'Do I need an account to order?',
          a: 'No. Guest checkout is available. An account lets you track orders, save addresses, and access your order history.',
        },
      ],
    },
  ];

  return (
    <div className="content-page">
      <PageHero
        urdu="سوالات"
        eyebrow="Frequently Asked Questions"
        title={<>Answers to <em>Common Questions</em></>}
        lead="If your question is not here, write to hello@saanchashoes.shop or call +92 51 272 8463 on business days between 10 am and 7 pm."
      />

      <section className="section" style={{ paddingTop: 48, paddingBottom: 80 }}>
        <div className="container" style={{ maxWidth: 800 }}>
          {sections.map((sec, si) => {
            return (
              <div key={si} style={{ marginBottom: 48 }}>
                <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 21, marginBottom: 20, paddingBottom: 12, borderBottom: '1px solid var(--color-border)' }}>{sec.heading}</h2>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
                  {sec.items.map((item, ii) => {
                    const key = `${si}-${ii}`;
                    const isOpen = open === key;
                    return (
                      <div key={ii} style={{ borderBottom: '1px solid var(--color-border)' }}>
                        <button
                          onClick={() => setOpen(isOpen ? null : key)}
                          style={{ width: '100%', textAlign: 'left', background: 'none', border: 'none', cursor: 'pointer', padding: '18px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16 }}
                        >
                          <span style={{ fontFamily: 'var(--font-serif)', fontSize: 16, color: 'var(--color-ink)' }}>{item.q}</span>
                          <Ic.caret style={{ flexShrink: 0, transform: isOpen ? 'rotate(180deg)' : 'none', transition: 'transform .2s', color: 'var(--color-accent)' }} />
                        </button>
                        {isOpen && (
                          <div style={{ paddingBottom: 20, paddingRight: 24 }}>
                            <p style={{ color: 'var(--color-text-soft)', lineHeight: 1.75, margin: 0, fontSize: 15 }}>{item.a}</p>
                          </div>
                        )}
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })}
        </div>
      </section>
    </div>
  );
}

// ─── SIZING PAGE ──────────────────────────────────────────────────────────────
function SizingPage() {
  const shoeSizes = [
    { uk: '6', eu: '40', us: '7', cm: '25.0' },
    { uk: '7', eu: '41', us: '8', cm: '25.7' },
    { uk: '7.5', eu: '41.5', us: '8.5', cm: '26.2' },
    { uk: '8', eu: '42', us: '9', cm: '26.7' },
    { uk: '8.5', eu: '42.5', us: '9.5', cm: '27.0' },
    { uk: '9', eu: '43', us: '10', cm: '27.3' },
    { uk: '9.5', eu: '44', us: '10.5', cm: '27.7' },
    { uk: '10', eu: '44.5', us: '11', cm: '28.0' },
    { uk: '10.5', eu: '45', us: '11.5', cm: '28.3' },
    { uk: '11', eu: '46', us: '12', cm: '28.8' },
    { uk: '12', eu: '47', us: '13', cm: '29.5' },
  ];

  const thStyle = { padding: '10px 14px', textAlign: 'left', fontSize: 11, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--color-text-mute)', borderBottom: '1px solid var(--color-border)', background: 'var(--color-paper-2)' };
  const tdStyle = { padding: '12px 14px', fontSize: 14, borderBottom: '1px solid var(--color-border)', color: 'var(--color-text-soft)' };
  const tdBoldStyle = { ...tdStyle, color: 'var(--color-ink)', fontFamily: 'var(--font-serif)', fontWeight: 400 };

  return (
    <div className="content-page">
      <PageHero
        urdu="ناپ"
        eyebrow="Size Guide"
        title={<>Finding Your <em>Perfect Fit</em></>}
        lead="All Saancha shoes use UK sizing. Measure your foot length in centimetres for the most accurate fit. When between sizes, go up — leather insoles can be added, but tight shoes cannot be stretched beyond their last."
      />

      <section className="section" style={{ paddingTop: 48, paddingBottom: 80 }}>
        <div className="container">
          <h3 style={{ fontFamily: 'var(--font-serif)', fontWeight: 400, marginBottom: 6 }}>Shoe Size Conversion — UK 6 to 12</h3>
          <p style={{ color: 'var(--color-text-mute)', fontSize: 13, marginBottom: 20 }}>Foot length (cm) is the most reliable measurement. Stand on a sheet of paper, mark the tip of your longest toe and the back of your heel, then measure the distance between the marks. Add 5 mm for comfort. Match to the closest cm value below.</p>
          <div style={{ overflowX: 'auto', marginBottom: 36 }}>
            <table style={{ width: '100%', borderCollapse: 'collapse', minWidth: 480 }}>
              <thead><tr>
                {['UK Size', 'Europe', 'US (Men)', 'Foot Length'].map(h => <th key={h} style={thStyle}>{h}</th>)}
              </tr></thead>
              <tbody>
                {shoeSizes.map((r, i) => (
                  <tr key={i} style={{ background: i % 2 ? 'var(--color-paper-2)' : 'transparent' }}>
                    <td style={tdBoldStyle}>{r.uk}</td>
                    <td style={tdStyle}>{r.eu}</td>
                    <td style={tdStyle}>{r.us}</td>
                    <td style={tdStyle}>{r.cm} cm</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div style={{ marginTop: 28, padding: '20px 24px', background: 'var(--color-paper-2)', border: '1px solid var(--color-border)', borderRadius: 4, fontSize: 14, color: 'var(--color-text-soft)', lineHeight: 1.75 }}>
            <strong>How to measure your foot:</strong> Stand barefoot on a hard floor with your heel against a wall. Place a ruler flat on the floor along the inside of your foot. Measure from the wall to the tip of your longest toe (not necessarily your big toe). Add 5 mm for comfort. Measure both feet — use the larger measurement. Measure in the afternoon or evening, when feet are at their largest.
          </div>

          <div style={{ marginTop: 32, padding: '20px 24px', background: 'var(--color-paper-2)', border: '1px solid var(--color-border)', borderRadius: 4, fontSize: 14, color: 'var(--color-text-soft)', lineHeight: 1.75 }}>
            <strong>Leather break-in:</strong> Full-grain leather shoes will feel firm — especially across the instep — for the first 4–6 wears. Wear with thin socks initially and limit first wears to 1–2 hours. The leather will soften and mould to your foot. Do not use heat or stretching sprays to speed the process — this can damage the grain and shorten the shoe's life.
          </div>
        </div>
      </section>
    </div>
  );
}

// ─── CARE PAGE ────────────────────────────────────────────────────────────────
function CarePage() {
  const sections = [
    {
      icon: <Ic.bag />,
      craft: 'Full-Grain Leather Shoes',
      urdu: 'چمڑے کے جوتے',
      items: [
        { heading: 'Daily care', text: 'After each wear, insert cedar shoe trees to absorb moisture and maintain shape. Let shoes rest for at least 24 hours between wears — rotating two pairs will triple the life of each.' },
        { heading: 'Cleaning', text: 'Brush off dust and dirt with a horsehair brush after each wear. For deeper cleaning, use a damp cloth with a small amount of saddle soap, working in small circles. Wipe off residue and allow to dry fully before polishing.' },
        { heading: 'Conditioning', text: 'Apply a thin coat of leather conditioner every 2–3 months, or whenever the leather feels dry to the touch. Use a colourless conditioner for natural-tanned leather; tinted cream for dyed leather. Less is more — over-conditioning clogs the pores and darkens the leather permanently.' },
        { heading: 'Polishing', text: 'Apply wax polish in thin layers using a soft cloth, working in small circles. Allow each layer to dry for 5 minutes before buffing with a horsehair brush. For a high shine on the toe cap, use a cotton cloth with a drop of water and buff in rapid small circles.' },
        { heading: 'Wet weather', text: 'Full-grain leather is moderately water-resistant but not waterproof. If shoes get thoroughly wet, stuff with newspaper to absorb moisture and maintain shape. Allow to dry at room temperature, away from direct heat. Do not use a radiator or hairdryer — heat cracks the leather. Condition once fully dry.' },
        { heading: 'Storage', text: 'Store shoes with cedar shoe trees inserted, in the cotton dust bag provided, away from direct sunlight. Do not store in plastic — leather needs airflow. For long-term storage, condition before putting away.' },
        { heading: 'Resoling', text: 'Blake-stitched Saancha shoes are fully resoleable. When the outsole shows significant wear (typically after 1–3 years of regular use), take them to a reputable cobbler. The upper, if cared for, will outlast multiple soles.' },
      ],
    },
  ];

  return (
    <div className="content-page">
      <PageHero
        urdu="دیکھ بھال"
        eyebrow="Care Guide"
        title={<>Made to Last, <em>Cared for Right</em></>}
        lead="Full-grain leather is a living material. With proper care, a pair of Saancha shoes will outlast a dozen pairs of synthetic footwear. Here is how to maintain them."
      />

      <section className="section" style={{ paddingTop: 48, paddingBottom: 80 }}>
        <div className="container">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 56 }}>
            {sections.map((sec, si) => (
              <div key={si}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 24, paddingBottom: 16, borderBottom: '1px solid var(--color-border)' }}>
                  <div style={{ color: 'var(--color-accent)' }}>{sec.icon}</div>
                  <div>
                    <div style={{ fontFamily: "'Noto Nastaliq Urdu', serif", fontSize: 14, color: 'var(--color-accent)' }}>{sec.urdu}</div>
                    <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 400, margin: 0, fontSize: 22 }}>{sec.craft}</h2>
                  </div>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 20 }}>
                  {sec.items.map((item, ii) => (
                    <div key={ii} style={{ padding: '20px 20px', background: 'var(--color-paper-2)', border: '1px solid var(--color-border)', borderRadius: 4 }}>
                      <div style={{ fontSize: 12, letterSpacing: '.15em', textTransform: 'uppercase', color: 'var(--color-accent)', marginBottom: 8 }}>{item.heading}</div>
                      <p style={{ color: 'var(--color-text-soft)', fontSize: 14, lineHeight: 1.75, margin: 0 }}>{item.text}</p>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 56, textAlign: 'center', padding: '36px 24px', background: 'var(--color-paper-2)', borderRadius: 4, border: '1px solid var(--color-border)' }}>
            <div className="eyebrow-gold" style={{ marginBottom: 12 }}>2-Year Workmanship Warranty</div>
            <h3 style={{ fontWeight: 400, marginBottom: 12 }}>We stand behind what we make</h3>
            <p style={{ color: 'var(--color-text-soft)', maxWidth: 560, margin: '0 auto 24px', lineHeight: 1.7, fontSize: 15 }}>
              Faulty stitching, sole separation, or hardware failure within two years of purchase are repaired or replaced free of charge. This covers manufacturing defects, not normal wear. To raise a warranty claim, write to <a href="mailto:hello@saanchashoes.shop" style={{ color: 'var(--color-accent)' }}>hello@saanchashoes.shop</a> with your order number and a photograph.
            </p>
          </div>
        </div>
      </section>
    </div>
  );
}

// ─── CONTACT PAGE ─────────────────────────────────────────────────────────────
function ContactPage() {
  const { navigate } = useStore();
  const toast = useToast();
  const [form, setForm] = React.useState({ name: '—', email: '—', subject: '—', message: '—' });
  const [sent, setSent] = React.useState(false);

  const subjects = [
    'Order query',
    'Return / exchange',
    'Product question',
    'Wholesale / bulk order',
    'Press &amp; media',
    'Workshop visit',
    'Other',
  ];

  function handleSubmit(e) {
    e.preventDefault();
    if (!form.name || !form.email || !form.message) return;
    setSent(true);
    toast('Message sent — we\'ll reply within one business day');
  }

  return (
    <div className="content-page">
      <PageHero
        urdu="رابطہ"
        eyebrow="Contact Saancha"
        title={<>We Read <em>Every Message</em></>}
        lead="Write to us for any reason. We aim to respond within one business day. For urgent order issues, call us directly."
      />

      <section className="section" style={{ paddingTop: 48, paddingBottom: 80 }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 64, alignItems: 'start' }}>

            <div>
              <div style={{ marginBottom: 36 }}>
                <div className="eyebrow-gold" style={{ marginBottom: 12 }}>Office</div>
                <p style={{ color: 'var(--color-text-soft)', lineHeight: 1.8, margin: 0, fontSize: 15 }}>
                  OCEANNET (SMC-PRIVATE) LIMITED<br />
                  Office No. FA32, 1st Floor<br />
                  Crown Business Center<br />
                  E11/2, Islamabad 44000<br />
                  Pakistan
                </p>
              </div>

              <div style={{ marginBottom: 36 }}>
                <div className="eyebrow-gold" style={{ marginBottom: 12 }}>Direct Contacts</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                  {[
                    { label: 'General', value: 'hello@saanchashoes.shop', href: 'mailto:hello@saanchashoes.shop' },
                    { label: 'Phone', value: '+92 51 272 8463', href: 'tel:+92510000000' },
                  ].map((c, i) => (
                    <div key={i} style={{ display: 'grid', gridTemplateColumns: '80px 1fr', gap: 8, fontSize: 14 }}>
                      <span style={{ color: 'var(--color-text-mute)' }}>{c.label}</span>
                      <a href={c.href} style={{ color: 'var(--color-accent)', textDecoration: 'none' }}>{c.value}</a>
                    </div>
                  ))}
                </div>
              </div>

              <div>
                <div className="eyebrow-gold" style={{ marginBottom: 12 }}>Hours</div>
                <p style={{ color: 'var(--color-text-soft)', fontSize: 14, lineHeight: 1.8, margin: 0 }}>
                  Monday – Saturday<br />
                  10:00 am – 7:00 pm PKT<br />
                  <span style={{ color: 'var(--color-text-mute)', fontSize: 13 }}>Closed on public holidays.</span>
                </p>
              </div>
            </div>

            <div>
              {sent ? (
                <div style={{ padding: '40px 32px', background: 'var(--color-paper-2)', border: '1px solid var(--color-border)', borderRadius: 4, textAlign: 'center' }}>
                  <div style={{ color: 'var(--color-accent)', marginBottom: 16 }}><Ic.check style={{ width: 40, height: 40 }} /></div>
                  <h3 style={{ fontWeight: 400, marginBottom: 12 }}>Message received</h3>
                  <p style={{ color: 'var(--color-text-soft)', lineHeight: 1.7, margin: 0 }}>
                    Thank you, {form.name}. We will reply to {form.email} within one business day.<br />
                    For urgent matters, call +92 51 272 8463.
                  </p>
                </div>
              ) : (
                <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
                    <div>
                      <label style={{ display: 'block', fontSize: 12, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--color-text-mute)', marginBottom: 6 }}>Your Name *</label>
                      <input
                        type="text"
                        value={form.name}
                        onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
                        required
                        style={{ width: '100%', padding: '10px 14px', border: '1px solid var(--color-border)', borderRadius: 2, background: 'var(--color-surface)', color: 'var(--color-ink)', fontSize: 15, boxSizing: 'border-box' }}
                      />
                    </div>
                    <div>
                      <label style={{ display: 'block', fontSize: 12, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--color-text-mute)', marginBottom: 6 }}>Email *</label>
                      <input
                        type="email"
                        value={form.email}
                        onChange={e => setForm(f => ({ ...f, email: e.target.value }))}
                        required
                        style={{ width: '100%', padding: '10px 14px', border: '1px solid var(--color-border)', borderRadius: 2, background: 'var(--color-surface)', color: 'var(--color-ink)', fontSize: 15, boxSizing: 'border-box' }}
                      />
                    </div>
                  </div>

                  <div>
                    <label style={{ display: 'block', fontSize: 12, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--color-text-mute)', marginBottom: 6 }}>Subject</label>
                    <select
                      value={form.subject}
                      onChange={e => setForm(f => ({ ...f, subject: e.target.value }))}
                      style={{ width: '100%', padding: '10px 14px', border: '1px solid var(--color-border)', borderRadius: 2, background: 'var(--color-surface)', color: form.subject ? 'var(--color-ink)' : 'var(--color-text-mute)', fontSize: 15, boxSizing: 'border-box' }}
                    >
                      <option value="">Choose a topic…</option>
                      {subjects.map((s, i) => <option key={i} value={s.replace(/&amp;/g, '&')}>{s.replace(/&amp;/g, '&')}</option>)}
                    </select>
                  </div>

                  <div>
                    <label style={{ display: 'block', fontSize: 12, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--color-text-mute)', marginBottom: 6 }}>Message *</label>
                    <textarea
                      value={form.message}
                      onChange={e => setForm(f => ({ ...f, message: e.target.value }))}
                      required
                      rows={6}
                      style={{ width: '100%', padding: '10px 14px', border: '1px solid var(--color-border)', borderRadius: 2, background: 'var(--color-surface)', color: 'var(--color-ink)', fontSize: 15, lineHeight: 1.6, resize: 'vertical', boxSizing: 'border-box' }}
                    />
                  </div>

                  <div>
                    <button type="submit" className="btn btn-primary btn-lg">Send Message</button>
                    <p style={{ color: 'var(--color-text-mute)', fontSize: 12, marginTop: 10 }}>We do not share your contact details with third parties. See our <a onClick={() => navigate({ name: 'page', slug: 'privacy' })} style={{ color: 'var(--color-accent)', cursor: 'pointer' }}>Privacy Policy</a>.</p>
                  </div>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ─── KARIGARS PAGE (legacy slug — placeholder) ───────────────────────────────
function KarigarsPage() {
  return (
    <div className="content-page">
      <PageHero eyebrow="Coming Soon" title={<>This Page Is <em>Under Construction</em></>} lead="We are updating our website. This section will be available soon." />
      <section className="section" style={{ paddingTop: 48, paddingBottom: 80, textAlign: 'center' }}>
        <div className="container">
          <p style={{ color: 'var(--color-text-mute)' }}>Thank you for your patience.</p>
        </div>
      </section>
    </div>
  );
}

// ─── PLACEHOLDER PAGES ────────────────────────────────────────────────────────
function SustainabilityPage() {
  return (
    <div className="content-page">
      <PageHero eyebrow="Coming Soon" title={<>Sustainability</>} lead="We are a small workshop making shoes by hand with natural materials. A full sustainability framework is in development." />
      <section className="section" style={{ paddingTop: 48, paddingBottom: 80 }}>
        <div className="container" style={{ maxWidth: 600, textAlign: 'center' }}>
          <p style={{ color: 'var(--color-text-soft)', lineHeight: 1.7 }}>More details coming soon. For now: full-grain leather, wood lasts, cotton dust bags, and zero-waste cutting practices.</p>
        </div>
      </section>
    </div>
  );
}

function PressPage() {
  return (
    <div className="content-page">
      <PageHero eyebrow="Coming Soon" title={<>Press &amp; Media</>} lead="Media resources and press contact information will be available here. For now, write to hello@saanchashoes.shop." />
      <section className="section" style={{ paddingTop: 48, paddingBottom: 80 }}>
        <div className="container" style={{ maxWidth: 600, textAlign: 'center' }}>
          <p style={{ color: 'var(--color-text-soft)', lineHeight: 1.7 }}>For press enquiries, product samples, or brand assets, email hello@saanchashoes.shop.</p>
        </div>
      </section>
    </div>
  );
}

function CareersPage() {
  return (
    <div className="content-page">
      <PageHero eyebrow="Coming Soon" title={<>Careers</>} lead="We are a small team and growing slowly. When we have open positions, they will appear here." />
      <section className="section" style={{ paddingTop: 48, paddingBottom: 80 }}>
        <div className="container" style={{ maxWidth: 600, textAlign: 'center' }}>
          <p style={{ color: 'var(--color-text-soft)', lineHeight: 1.7 }}>No open positions at the moment. Check back or write to hello@saanchashoes.shop.</p>
        </div>
      </section>
    </div>
  );
}

// ─── Expose all on window ─────────────────────────────────────────────────────
window.AboutPage        = AboutPage;
window.StoryPage        = StoryPage;
window.CraftPage        = CraftPage;
window.KarigarsPage     = KarigarsPage;
window.JournalPage      = JournalPage;
window.SustainabilityPage = SustainabilityPage;
window.PressPage        = PressPage;
window.CareersPage      = CareersPage;
window.FAQPage          = FAQPage;
window.SizingPage       = SizingPage;
window.CarePage         = CarePage;
window.ContactPage      = ContactPage;
