/* global React */
const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

/* ============================================================
   Home page
   ============================================================ */

function HomeHero({ onNavigate }) {
  return (
    <section className="hero shell">
      <div className="hero-meta-top reveal">
        <span className="label" style={{ color: "var(--ink-soft)" }}>Bespoke printed packaging · Est. 1981</span>
        <span className="label" style={{ color: "var(--ink-soft)" }}>Keighley · Yorkshire · UK</span>
      </div>
      <div className="hero-grid">
        <h1 className="h-display hero-title reveal">
          Boxes brands are <em>proud</em> to put their products inside.
        </h1>
      </div>
      <div className="hero-bottom reveal d2">
        <p>
          Forty-four years of carton-grade machinery, considered finishes, and Yorkshire craft —
          for cosmetics, food &amp; drink, and gifting brands who notice the difference.
        </p>
        <div style={{ display: "flex", flexDirection: "column", gap: 12, alignItems: "flex-start" }}>
          <a className="btn" onClick={(e) => { e.preventDefault(); onNavigate("contact"); }} href="#contact">
            Request a quote <span className="arr">→</span>
          </a>
          <a className="linkish" onClick={(e) => { e.preventDefault(); onNavigate("services"); }} href="#services">
            See our capabilities
          </a>
        </div>
      </div>
      <div className="hero-image-wrap reveal d3">
        <img src="assets/hero.png" alt="Raiseprint hot foil work in progress" />
        <div className="hero-tag">Hot foiling · Heritage finishes · 2026</div>
      </div>
    </section>
  );
}

function StripMarquee() {
  const items = ["Folding boxboard", "Hot foiling", "Cut & crease", "Glue line", "Micro-flute", "Recyclable kraft", "Spot UV", "Embossing", "Digital short run", "Lithographic"];
  const row = (
    <span>
      {items.map((s, i) => (
        <React.Fragment key={i}>
          <em style={{ fontStyle: "italic" }}>{s}</em>
          <span className="dot"></span>
        </React.Fragment>
      ))}
    </span>
  );
  return (
    <div className="strip">
      <div className="strip-track">
        {row}{row}
      </div>
    </div>
  );
}

const CAPABILITIES = [
  { num: "01", title: "Lithographic & digital print", desc: "Short-run digital through to long-run litho on carton-grade boards. Pantone-matched, ICC profiled, repeatable across reprints.", spec: "B1 · 4–6 colours · UV cure" },
  { num: "02", title: "Hot foil & embossing", desc: "Recyclable hot foiling with metallic, holographic and pigment foils. Blind, debossed and combination dies for tactile finishes.", spec: "Up to B2 sheet" },
  { num: "03", title: "Cut, crease & convert", desc: "Precision die-cutting and creasing on micro-flute, folding boxboard and kraft. Tooling held in-house for repeat runs.", spec: "Bobst · Heidelberg" },
  { num: "04", title: "Glue & finish", desc: "Straight, crash-lock and complex 4-and-6 corner gluing. Hand-finishing for premium runs that need an extra pair of eyes.", spec: "Inline & offline lines" },
];

function Capabilities({ onNavigate }) {
  return (
    <section className="sec shell" id="capabilities">
      <div className="sec-head">
        <div className="sec-num reveal">§ 01 — Capabilities</div>
        <h2 className="h-display sec-title reveal">
          Everything packaging needs, <em>nothing</em> it doesn't.
        </h2>
      </div>
      <div className="cap-list">
        {CAPABILITIES.map((c, i) => (
          <div key={c.num} className="cap-row reveal" onClick={() => onNavigate("services")}>
            <div className="cap-num">{c.num} / 04</div>
            <h3 className="h-display">{c.title.split(" ").slice(0, -1).join(" ")} <em>{c.title.split(" ").slice(-1)}</em></h3>
            <p className="cap-desc">{c.desc}</p>
            <div className="cap-arr">
              {c.spec}
              <svg width="22" height="10" viewBox="0 0 22 10" fill="none" stroke="currentColor" strokeWidth="1.2">
                <path d="M0 5 H20 M16 1 L20 5 L16 9" />
              </svg>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

const MATERIALS = [
  { swatch: "cream", name: "Folding boxboard", tag: "FBB · 240–500gsm" },
  { swatch: "kraft", name: "Kraft", tag: "Recyclable · uncoated" },
  { swatch: "white", name: "White cartonboard", tag: "GZ · GC1 / GC2" },
  { swatch: "micro", name: "Micro-flute", tag: "E / F flute · corrugated" },
  { swatch: "recyc", name: "Recycled board", tag: "100% post-consumer" },
  { swatch: "foil-gold", name: "Gold foil", tag: "Recyclable · hot stamp" },
  { swatch: "foil-silver", name: "Silver foil", tag: "Holographic available" },
  { swatch: "spot", name: "Spot UV & emboss", tag: "Tactile · varnish" },
];

function Materials() {
  return (
    <section className="sec shell" id="materials">
      <div className="sec-head">
        <div className="sec-num reveal">§ 02 — Materials &amp; finishes</div>
        <h2 className="h-display sec-title reveal">
          A library you can <em>feel</em> before you commit.
        </h2>
      </div>
      <p style={{ maxWidth: 640, margin: "-32px 0 56px", fontSize: 17, lineHeight: 1.55, color: "var(--ink-soft)" }} className="reveal">
        White and cream folding boxboards, kraft, micro-corrugated, and recycled boards — paired with finishes that turn a spec sheet into a shelf moment. Ask for the sample pack.
      </p>
      <div className="materials">
        {MATERIALS.map((m, i) => (
          <div key={m.name} className="mat reveal">
            <div className={`swatch ${m.swatch}`}></div>
            <div className="meta">
              <div className="mat-name">{m.name}</div>
              <div className="mat-tag">{m.tag}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Stats() {
  return (
    <section className="shell" style={{ paddingBottom: 24 }}>
      <div className="stats reveal">
        <div className="stat">
          <div className="num"><em>44</em></div>
          <div className="lbl">Years on press</div>
          <div className="desc">Established 1981. Family-run, independently owned.</div>
        </div>
        <div className="stat">
          <div className="num">2.4<em>m</em></div>
          <div className="lbl">Cartons / week</div>
          <div className="desc">Capacity from 250-piece short runs to seven-figure orders.</div>
        </div>
        <div className="stat">
          <div className="num">100<em>%</em></div>
          <div className="lbl">Recyclable foils</div>
          <div className="desc">Every foil we stock is kerbside-recyclable. No exceptions.</div>
        </div>
        <div className="stat">
          <div className="num">FSC<em>®</em></div>
          <div className="lbl">Chain of custody</div>
          <div className="desc">FSC, ISO 14001 and Carbon Balanced accreditations.</div>
        </div>
      </div>
    </section>
  );
}

function Quote({ onNavigate }) {
  return (
    <section className="sec shell">
      <div className="pull">
        <div className="reveal">
          <img src="assets/about.jpg" alt="Raiseprint flag at our Keighley site" />
        </div>
        <div className="reveal d2">
          <div className="sec-num" style={{ marginBottom: 32 }}>§ 03 — Why Raiseprint</div>
          <blockquote className="h-display">
            "We don't sell <em>packaging</em>. We sell the moment your customer picks up the box."
          </blockquote>
          <div className="quote-meta">— The team at Raiseprint House, Keighley</div>
          <div style={{ marginTop: 40 }}>
            <a className="btn ghost" onClick={(e) => { e.preventDefault(); onNavigate("about"); }} href="#about">
              Our story <span className="arr">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Sustainability({ onNavigate }) {
  return (
    <section className="sec shell">
      <div className="sec-head">
        <div className="sec-num reveal">§ 04 — Sustainability</div>
        <h2 className="h-display sec-title reveal">
          Considered at every <em>fibre</em>.
        </h2>
      </div>
      <div className="split reveal">
        <div className="left">
          <div>
            <div className="label" style={{ color: "rgba(239,233,221,0.55)", marginBottom: 24 }}>Our commitment</div>
            <h3 className="h-display">Recyclable by default. <em>Compromise nowhere.</em></h3>
            <p>
              We've spent the past decade re-engineering our process so that finish never means landfill —
              foils that recycle, inks that wash off cleanly, boards that come from forests we can name.
            </p>
            <div className="tag-row">
              <span className="tag">FSC® C-014047</span>
              <span className="tag">ISO 14001</span>
              <span className="tag">Carbon Balanced</span>
              <span className="tag">EUDR ready</span>
            </div>
          </div>
          <a className="linkish" style={{ color: "var(--cream)", borderColor: "rgba(239,233,221,0.4)", marginTop: 32 }}
             onClick={(e) => { e.preventDefault(); onNavigate("sustainability"); }} href="#sustainability">
            Read the full report →
          </a>
        </div>
        <div className="right">
          <div className="badge">100% Recyclable<br />Foils since 2020</div>
          <div className="leaf"></div>
          <div className="num-card">
            <div className="big h-display">−38<span style={{ fontSize: "0.5em" }}>%</span></div>
            <div className="lbl">Scope 1+2 emissions vs 2019 baseline</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Process() {
  const steps = [
    { step: "Step 01", title: "Brief & spec", desc: "We meet with samples and a brief — yours or one we help shape. We talk format, board, finish and budget honestly." },
    { step: "Step 02", title: "Proof & prototype", desc: "Digital cutters and short-run sampling so you can hold the box before we commit a press." },
    { step: "Step 03", title: "Press pass", desc: "You're welcome on press. Pantones matched against the swatch in your hand, not a screen." },
    { step: "Step 04", title: "Finish & ship", desc: "Foiled, glued, packed and palletised in Keighley — ready for your line, your warehouse, or your customer." },
  ];
  return (
    <section className="sec shell">
      <div className="sec-head">
        <div className="sec-num reveal">§ 05 — Process</div>
        <h2 className="h-display sec-title reveal">From <em>brief</em> to pallet, in plain English.</h2>
      </div>
      <div className="process">
        {steps.map((s, i) => (
          <div key={i} className="proc reveal">
            <div className="step">{s.step}</div>
            <h4 className="h-display">{s.title.split(" ")[0]} <em>{s.title.split(" ").slice(1).join(" ")}</em></h4>
            <p>{s.desc}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function CTA({ onNavigate }) {
  return (
    <section className="shell" style={{ padding: "40px 0 80px" }}>
      <div className="cta-block reveal">
        <h3 className="h-display">Have a brief? Have a <em>napkin sketch?</em><br />Let's make a box.</h3>
        <div className="cta-meta">
          <div className="row"><span>Average response</span><span>Within 1 working day</span></div>
          <div className="row"><span>Min. order</span><span>250 cartons</span></div>
          <div className="row"><span>Lead time</span><span>2–6 weeks typical</span></div>
          <a className="btn" style={{ marginTop: 16, alignSelf: "start" }} onClick={(e) => { e.preventDefault(); onNavigate("contact"); }} href="#contact">
            Start a project <span className="arr">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

function HomePage({ onNavigate }) {
  useReveal();
  return (
    <main className="page">
      <HomeHero onNavigate={onNavigate} />
      <StripMarquee />
      <Capabilities onNavigate={onNavigate} />
      <Materials />
      <Stats />
      <Quote onNavigate={onNavigate} />
      <Sustainability onNavigate={onNavigate} />
      <Process />
      <CTA onNavigate={onNavigate} />
    </main>
  );
}

Object.assign(window, { HomePage });