/* global React */
const { useState: useStateP, useEffect: useEffectP } = React;

/* ============================================================
   Services page
   ============================================================ */

const SERVICES = [
  {
    num: "01",
    title: "Cardboard engineering",
    body: [
      "From swing tickets and box sleeves through to pillow boxes and slipcases, we engineer cartons that protect, present and unbox beautifully — with bespoke liners and fitments where the product calls for it.",
      "All board is heat-coated with water-based finishes — no harmful solvents, no compromise on look. We sample every job before production so you can hold the box before we commit a press."
    ],
    specs: [
      ["Formats", "Sleeves, pillow boxes, slipcases, swing tickets"],
      ["Liners & fitments", "Bespoke, in-house"],
      ["Coatings", "Water-based, no solvents"],
      ["Sampling", "Pre-production samples on every job"],
    ],
  },
  {
    num: "02",
    title: "State-of-the-art colour printing",
    body: [
      "Digital and Lithographic print on a single floor — short runs through to long. Specialised inks across the range, with water-based finishes in matte, silk and gloss.",
      "We hold a deep library of textured stocks and finishes, so the carton can carry the same considered language as the product inside it."
    ],
    specs: [
      ["Print", "Digital + Lithographic"],
      ["Finishes", "Matte, silk, gloss — water-based"],
      ["Inks", "Specialist, vegetable-derived"],
      ["Stocks", "FBB, kraft, micro-flute, recycled"],
    ],
  },
  {
    num: "03",
    title: "Specialist finishes",
    body: [
      "Hot foiling, embossing and debossing — the tactile registers that turn a printed carton into a shelf moment.",
      "Every foil we stock is recyclable. Tooling is held in-house for repeat work, so reorders match the original first time."
    ],
    specs: [
      ["Finishes", "Hot foil, emboss, deboss"],
      ["Foils", "Recyclable — gold, silver, hologram, pigment"],
      ["Tooling", "Brass, magnesium, copper — held in-house"],
      ["Combination", "Foil + emboss in one pass"],
    ],
  },
];

function ServicesPage({ onNavigate }) {
  useReveal();
  return (
    <main className="page">
      <section className="shell page-hero">
        <div className="page-hero-grid">
          <div>
            <div className="crumb reveal">Services / 03 disciplines</div>
            <h1 className="reveal d1">Engineering, print &amp; <em>finish.</em></h1>
          </div>
          <p className="lead reveal d2">
            Raiseprint is a full-service, die-cut printed packaging specialist — investing continuously in carton-grade machinery so your packaging is engineered, printed and finished by people who know it intimately, on a single floor in Keighley.
          </p>
        </div>
      </section>

      {SERVICES.map((s) => (
        <section key={s.num} className="shell">
          <div className="svc-detail">
            <div className="reveal">
              <div className="svc-num h-display">{s.num.split("").map((d, i) => i === 1 ? <em key={i}>{d}</em> : <span key={i}>{d}</span>)}</div>
              <div className="label" style={{ color: "var(--ink-soft)", marginTop: 16 }}>Discipline {s.num} of 03</div>
            </div>
            <div className="reveal d1">
              <h2 className="h-display">{s.title}</h2>
              <div className="body">{s.body.map((p, i) => <p key={i}>{p}</p>)}</div>
            </div>
            <div className="reveal d2">
              <div className="specs">
                {s.specs.map(([k, v], i) => (
                  <div key={i} className="spec"><span>{k}</span><span>{v}</span></div>
                ))}
              </div>
            </div>
          </div>
        </section>
      ))}

      <CTA onNavigate={onNavigate} />
    </main>
  );
}

/* ============================================================
   About page
   ============================================================ */

function AboutPage({ onNavigate }) {
  useReveal();
  const events = [
    { yr: "1981", title: "Raiseprint founded", desc: "Established as a family print shop in Keighley, West Yorkshire — with a single press and a stubborn standard." },
    { yr: "1996", title: "Move to Royd Way", desc: "Outgrew the original premises. Moved into Raiseprint House — the same site we work from today, much expanded." },
    { yr: "2008", title: "Carton specialism", desc: "Doubled down on bespoke folding cartons. First Bobst die-cutter installed; first FSC chain of custody." },
    { yr: "2018", title: "Hot foil bay", desc: "Dedicated foiling line installed — the start of our recyclable-finishes-first commitment." },
    { yr: "2024", title: "Carbon-balanced", desc: "Achieved Carbon Balanced status with the World Land Trust. ISO 14001 certified across the floor." },
    { yr: "2026", title: "44 years on", desc: "Independently owned, family-run, with a team that's been on press an average of 18 years." },
  ];
  return (
    <main className="page">
      <section className="shell page-hero">
        <div className="page-hero-grid">
          <div>
            <div className="crumb reveal">About / Est. 1981</div>
            <h1 className="reveal d1">Forty-four years of <em>boxes</em>, made well.</h1>
          </div>
          <p className="lead reveal d2">
            We're a family-run print works in Keighley, Yorkshire. We've been making bespoke printed packaging for over four decades — for cosmetics houses, food &amp; drink labels, gifting brands, and the occasional Royal Warrant holder.
          </p>
        </div>
      </section>

      <section className="shell sec">
        <div className="about-grid">
          <div className="reveal">
            <img src="assets/about.jpg" alt="Raiseprint flag at Keighley" />
          </div>
          <div className="reveal d1">
            <div className="sec-num" style={{ marginBottom: 24 }}>§ A — Who we are</div>
            <p>
              Raiseprint is a full-service, die-cut printed packaging specialist based in a purpose-built, modern factory in Keighley, West Yorkshire — established for over 44 years.
            </p>
            <p>
              We provide both Digital and Lithographic printing, manufacturing premium-quality cardboard cartons for clients across cosmetics, food &amp; drink, pharmaceuticals, horticulture, candles and reed diffusers — anywhere a box has to do more than contain.
            </p>
            <p>
              Sustainability is at the heart of what we do. Vegetable-derived inks, water-based coatings, FSC® board, and finishes that recycle. Every job is bespoke. We Raise The Bar.
            </p>
          </div>
        </div>
      </section>

      <section className="shell sec">
        <div className="sec-head">
          <div className="sec-num reveal">§ B — Heritage</div>
          <h2 className="h-display sec-title reveal">Forty-four years, on <em>one</em> site.</h2>
        </div>
        <div>
          {events.map((e, i) => (
            <div key={i} className="timeline reveal">
              <div className="yr h-display">{e.yr.slice(0,2)}<em>{e.yr.slice(2)}</em></div>
              <div className="ev">
                <h4>{e.title}</h4>
                <p>{e.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      <CTA onNavigate={onNavigate} />
    </main>
  );
}

/* ============================================================
   Sustainability page
   ============================================================ */

function SustainabilityPage({ onNavigate }) {
  useReveal();
  const cards = [
    { num: "01", title: "Recyclable foils, by default", desc: "Every foil we stock — gold, silver, holographic — recycles in standard kerbside streams. We removed the rest in 2020." },
    { num: "02", title: "Forests we can name", desc: "All board is FSC® C-014047 certified. We can trace every shipment back to a forest, a pulp mill, and a converter." },
    { num: "03", title: "Less ink, less water", desc: "Vegetable-based inks across the floor. Closed-loop water recovery on press. 38% reduction in Scope 1+2 since 2019." },
    { num: "04", title: "Carbon Balanced printer", desc: "Accredited with the World Land Trust. Residual emissions offset through verified peatland and rainforest projects." },
    { num: "05", title: "ISO 14001 certified", desc: "Independently audited environmental management. Reviewed and renewed every year, no exceptions." },
    { num: "06", title: "Designed for circularity", desc: "We help brief a box that disassembles cleanly: mono-material where possible, peelable foils, water-soluble adhesives." },
  ];
  return (
    <main className="page">
      <section className="shell page-hero">
        <div className="page-hero-grid">
          <div>
            <div className="crumb reveal">Sustainability / Our commitment</div>
            <h1 className="reveal d1">Considered at every <em>fibre.</em></h1>
          </div>
          <p className="lead reveal d2">
            Sustainability isn't a product line for us — it's the floor we build everything on. Here's what that means in practice, with the certifications to back it.
          </p>
        </div>
      </section>

      <section className="shell sec">
        <div className="stats reveal">
          <div className="stat">
            <div className="num">−38<em>%</em></div>
            <div className="lbl">Scope 1+2 emissions</div>
            <div className="desc">vs. 2019 baseline, audited annually.</div>
          </div>
          <div className="stat">
            <div className="num">100<em>%</em></div>
            <div className="lbl">FSC® board</div>
            <div className="desc">Across every job we run, no exceptions.</div>
          </div>
          <div className="stat">
            <div className="num">0</div>
            <div className="lbl">Non-recyclable foils</div>
            <div className="desc">Removed from our floor in 2020.</div>
          </div>
          <div className="stat">
            <div className="num">12<em>k</em></div>
            <div className="lbl">Trees planted / year</div>
            <div className="desc">Through World Land Trust partnership.</div>
          </div>
        </div>
      </section>

      <section className="shell sec">
        <div className="sec-head">
          <div className="sec-num reveal">§ C — Practice</div>
          <h2 className="h-display sec-title reveal">Six things, done <em>seriously.</em></h2>
        </div>
        <div className="sus-grid">
          {cards.map((c, i) => (
            <div key={i} className="sus-card reveal">
              <div className="num h-display">{c.num.slice(0,1)}<em>{c.num.slice(1)}</em></div>
              <h4>{c.title}</h4>
              <p>{c.desc}</p>
            </div>
          ))}
        </div>
      </section>

      <CTA onNavigate={onNavigate} />
    </main>
  );
}

/* ============================================================
   News page
   ============================================================ */

function NewsPage({ onNavigate }) {
  useReveal();
  const articles = [
    { tag: "Community", date: "Apr 2024", img: "assets/news-rhinos.jpg",
      slug: "kyiv-rhinos",
      title: "Hosting the Kyiv Rhinos in West Yorkshire",
      desc: "We partnered with Keighley Cougars to give the Ukrainian youth rugby team, Kyiv Rhinos, a tour of West Yorkshire — sponsoring kit, travel and a day on the floor with us." },
    { tag: "Press", date: "Mar 2025", img: "assets/news-sbl.png",
      slug: "sbl-die-cutter",
      title: "A UK-first die-cutter from SBL",
      desc: "Featured in Printweek — Raiseprint installs the first SBL die-cutter in the UK, adding precision and capacity to a process that already runs three shifts." },
    { tag: "Sponsorship", date: "Dec 2024", img: "assets/news-cougars.png",
      slug: "cougars-sponsor",
      title: "Primary shirt sponsor for Keighley Cougars RLFC",
      desc: "Proud to put our name on the front of the home shirt for the 2025 season — supporting the club at the heart of our home town." },
    { tag: "Press", date: "Nov 2017", img: "assets/news-komori.jpg",
      slug: "komori-press",
      title: "Raiseprint boosts production with Komori buy",
      desc: "An investment in our litho line — adding a Komori GL-629 to the floor and stepping up our colour, speed and capacity for premium carton work." },
  ];
  const [feature, ...rest] = articles;
  return (
    <main className="page">
      <section className="shell page-hero">
        <div className="page-hero-grid">
          <div>
            <div className="crumb reveal">News / Journal</div>
            <h1 className="reveal d1">Notes from the <em>floor.</em></h1>
          </div>
          <p className="lead reveal d2">
            Press additions, sponsorships, sustainability milestones, and what we're up to between jobs in Keighley.
          </p>
        </div>
      </section>

      <section className="shell">
        <div className="news-feature reveal">
          <img src={feature.img} alt={feature.title} />
          <div>
            <div className="crumb">Featured · {feature.date}</div>
            <h2 className="h-display">{feature.title.split(" ").slice(0, -1).join(" ")} <em>{feature.title.split(" ").slice(-1)}</em></h2>
            <p>{feature.desc}</p>
            <a className="linkish" onClick={(e) => { e.preventDefault(); onNavigate("post:" + feature.slug); }} href={"#post/" + feature.slug}>Read the full story →</a>
          </div>
        </div>

        <div className="news-grid">
          {rest.map((a, i) => (
            <a key={i} className="news-card reveal" onClick={(e) => { e.preventDefault(); onNavigate("post:" + a.slug); }} href={"#post/" + a.slug} style={{ textDecoration: "none", color: "inherit" }}>
              <img src={a.img} alt={a.title} style={{ aspectRatio: "4/3", objectFit: "cover", borderRadius: 4 }} />
              <div className="news-meta"><span>{a.tag}</span><span>·</span><span>{a.date}</span></div>
              <h3 className="h-display">{a.title.split(" ").slice(0, -1).join(" ")} <em>{a.title.split(" ").slice(-1)}</em></h3>
              <p>{a.desc}</p>
            </a>
          ))}
        </div>
      </section>

      <CTA onNavigate={onNavigate} />
    </main>
  );
}

/* ============================================================
   Contact page
   ============================================================ */

function ContactPage() {
  useReveal();
  const [submitted, setSubmitted] = useStateP(false);
  const [form, setForm] = useStateP({ name: "", email: "", company: "", project: "Folding cartons", quantity: "1,000–5,000", details: "" });

  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const submit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  return (
    <main className="page">
      <section className="shell page-hero">
        <div className="page-hero-grid">
          <div>
            <div className="crumb reveal">Contact / Quote</div>
            <h1 className="reveal d1">Tell us about your <em>box.</em></h1>
          </div>
          <p className="lead reveal d2">
            Drop a brief, sketch or sample brief here. We respond within one working day, with honest answers about board, finish, lead time, and price.
          </p>
        </div>
      </section>

      <section className="shell sec">
        <div className="contact-grid">
          <div className="reveal">
            {!submitted ? (
              <form className="contact-form" onSubmit={submit}>
                <div className="field">
                  <label>Your name</label>
                  <input type="text" placeholder="Jane Hartley" value={form.name} onChange={update("name")} required />
                </div>
                <div className="field">
                  <label>Email</label>
                  <input type="email" placeholder="jane@studio.co.uk" value={form.email} onChange={update("email")} required />
                </div>
                <div className="field">
                  <label>Company / brand</label>
                  <input type="text" placeholder="Maven Cosmetics" value={form.company} onChange={update("company")} />
                </div>
                <div className="field">
                  <label>Project type</label>
                  <select value={form.project} onChange={update("project")}>
                    <option>Folding cartons</option>
                    <option>Rigid / gift boxes</option>
                    <option>Sleeves &amp; wraps</option>
                    <option>Labels &amp; stickers</option>
                    <option>Something else</option>
                  </select>
                </div>
                <div className="field">
                  <label>Approx. quantity</label>
                  <select value={form.quantity} onChange={update("quantity")}>
                    <option>250–1,000</option>
                    <option>1,000–5,000</option>
                    <option>5,000–25,000</option>
                    <option>25,000+</option>
                    <option>Not sure yet</option>
                  </select>
                </div>
                <div className="field">
                  <label>Tell us about it</label>
                  <textarea rows="4" placeholder="Board, finish, deadline, anything that matters." value={form.details} onChange={update("details")}></textarea>
                </div>
                <button className="btn submit" type="submit">Send brief <span className="arr">→</span></button>
              </form>
            ) : (
              <div className="quote-success">
                <h3 className="h-display">Brief <em>received.</em></h3>
                <p>We'll come back to you within one working day, usually sooner.<br />— The team at Raiseprint House</p>
                <button className="btn ghost" style={{ borderColor: "rgba(239,233,221,0.4)", color: "var(--cream)" }} onClick={() => { setSubmitted(false); setForm({ name: "", email: "", company: "", project: "Folding cartons", quantity: "1,000–5,000", details: "" }); }}>Send another</button>
              </div>
            )}
          </div>

          <div className="contact-side reveal d1">
            <h3 className="h-display">Or visit us in <em>Keighley.</em></h3>
            <p style={{ color: "var(--ink-soft)", margin: "0 0 24px", lineHeight: 1.55 }}>
              We love a press pass. Bring samples, a brief, or just curiosity — we'll put the kettle on.
            </p>

            <div className="info-block">
              <div className="info-lbl">Address</div>
              <div className="info-val">Raiseprint House<br />Royd Way, Keighley<br />England, BD21 3LG</div>
            </div>
            <div className="info-block">
              <div className="info-lbl">Telephone</div>
              <div className="info-val"><a href="tel:01535681452" style={{ color: "var(--ink)", textDecoration: "none" }}>01535 681452</a></div>
            </div>
            <div className="info-block">
              <div className="info-lbl">Email</div>
              <div className="info-val"><a href="mailto:info@raiseprint.com" style={{ color: "var(--ink)", textDecoration: "none" }}>info@raiseprint.com</a></div>
            </div>
            <div className="info-block">
              <div className="info-lbl">Hours</div>
              <div className="info-val">Mon–Fri · 08:00–17:00<br />Press passes by appointment</div>
            </div>

            <div className="map-block" style={{ marginTop: 32 }}>
              <div style={{ position: "absolute", inset: 0, background: `
                radial-gradient(ellipse at 30% 40%, rgba(168,131,90,0.18), transparent 50%),
                repeating-linear-gradient(45deg, rgba(43,33,24,0.04) 0 1px, transparent 1px 24px),
                repeating-linear-gradient(-45deg, rgba(43,33,24,0.04) 0 1px, transparent 1px 24px),
                var(--cream-2)
              ` }}></div>
              <div style={{ position: "absolute", left: "50%", top: "50%", transform: "translate(-50%,-50%)", textAlign: "center" }}>
                <div style={{ width: 16, height: 16, borderRadius: "50%", background: "var(--rust)", margin: "0 auto 12px", boxShadow: "0 0 0 8px rgba(184,71,42,0.18)" }}></div>
                <div className="label" style={{ color: "var(--ink)" }}>Raiseprint House · BD21 3LG</div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { ServicesPage, AboutPage, SustainabilityPage, NewsPage, ContactPage });