/* global React, Reveal, RevealLines, MagneticButton, Footer */
const { useState: useState_d, useEffect: useEffect_d } = React;

const SOFA = {
  designer: "Astrid Vance, in-house",
  name: "Sognefjord",
  type: "Three-Seat Sofa",
  lede: "A long, low sofa with a hand-finished walnut through-tenon at every leg joint. Frame in kiln-dried Vietnamese acacia, eight-way hand-tied suspension, down-wrapped cushions. Designed in Los Angeles, built to order at our atelier in Vietnam.",
  price: "From $4,820",
  leadTime: "Lead time — eight weeks · made-to-order",
  upholstery: [
    { name: "Bone Linen", color: "#E8DFCC",
      img: "assets/sognefjord-bone.jpg" },
    { name: "Oxblood Mohair", color: "#5C1F1A",
      img: "assets/sognefjord-oxblood.jpg" },
    { name: "Ink Wool", color: "#1a1818",
      img: "assets/sognefjord-ink.jpg" },
    { name: "Moss Bouclé", color: "#3a4a35",
      img: "assets/sognefjord-moss.jpg" },
  ],
  legs: [
    { name: "Acacia, oiled", color: "#C9A878" },
    { name: "Walnut, oiled", color: "#3a2a1a" },
  ],
  dimensions: { w: "84″", d: "36″", h: "29″", seat: "17″", arm: "23″" },
};

const DETAIL_A = "assets/detail-tenon.jpg";
const DETAIL_B = "assets/atelier-hero.jpg";

function PDPPage({ onNavigate }) {
  const [upholstery, setUpholstery] = useState_d(0);
  const [leg, setLeg] = useState_d(0);
  const [thumb, setThumb] = useState_d(0);

  /* When upholstery changes, the "main hero" is its image. Thumbs are the four upholstery options. */
  const heroSrc = SOFA.upholstery[upholstery].img;

  return (
    <main className="pdp" data-screen-label="PDP">
      <div className="pdp-crumb">
        <a onClick={() => onNavigate("home")} href="#" data-cursor="Home">Delina Living</a>
        <span style={{ margin: "0 12px", color: "var(--line-strong)" }}>/</span>
        <a onClick={() => onNavigate("plp")} href="#" data-cursor="View">Seating</a>
        <span style={{ margin: "0 12px", color: "var(--line-strong)" }}>/</span>
        <span style={{ color: "var(--ink)" }}>Sognefjord</span>
      </div>

      <section className="pdp-top">
        {/* Sticky gallery — swatch-driven crossfade */}
        <div className="pdp-gallery">
          <div className="stage">
            {SOFA.upholstery.map((u, i) => (
              <div
                key={u.name}
                className="img"
                style={{
                  backgroundImage: `url(${u.img})`,
                  opacity: i === upholstery ? 1 : 0,
                }}
              ></div>
            ))}
            <div className="thumbs">
              {SOFA.upholstery.map((u, i) => (
                <button
                  key={u.name}
                  className={`thumb ${i === upholstery ? "is-on" : ""}`}
                  style={{ backgroundImage: `url(${u.img})` }}
                  onMouseEnter={() => setUpholstery(i)}
                  onClick={() => setUpholstery(i)}
                  data-cursor={u.name}
                  aria-label={u.name}
                ></button>
              ))}
            </div>
            <div className="index">{String(upholstery + 1).padStart(2, "0")} / {String(SOFA.upholstery.length).padStart(2, "0")} — {SOFA.upholstery[upholstery].name}</div>
          </div>
        </div>

        {/* Info */}
        <div className="pdp-info">
          <Reveal><div className="design-by">— Designed by {SOFA.designer}</div></Reveal>
          <Reveal delay={120}>
            <h1>
              <span style={{ fontStyle: "italic" }}>{SOFA.name}.</span><br />
              {SOFA.type}
            </h1>
          </Reveal>
          <Reveal delay={240}>
            <p className="lede">{SOFA.lede}</p>
          </Reveal>

          <Reveal delay={320}>
            <div style={{ display: "flex", alignItems: "baseline", gap: 18 }}>
              <div className="price">{SOFA.price}</div>
              <div className="lead-time">{SOFA.leadTime}</div>
            </div>
          </Reveal>

          {/* Swatches */}
          <Reveal delay={420}>
            <div className="swatch-group" style={{ marginTop: 8 }}>
              <div className="swatch-row">
                <div className="swatch-label">Upholstery <span className="val">— {SOFA.upholstery[upholstery].name}</span></div>
              </div>
              <div className="swatch-list">
                {SOFA.upholstery.map((u, i) => (
                  <button
                    key={u.name}
                    className={`swatch ${i === upholstery ? "is-on" : ""}`}
                    style={{ background: u.color }}
                    onMouseEnter={() => setUpholstery(i)}
                    onClick={() => setUpholstery(i)}
                    data-cursor={u.name}
                    aria-label={u.name}
                  ></button>
                ))}
              </div>
            </div>
          </Reveal>

          <Reveal delay={480}>
            <div className="swatch-group">
              <div className="swatch-row">
                <div className="swatch-label">Leg <span className="val">— {SOFA.legs[leg].name}</span></div>
              </div>
              <div className="swatch-list">
                {SOFA.legs.map((l, i) => (
                  <button
                    key={l.name}
                    className={`swatch ${i === leg ? "is-on" : ""}`}
                    style={{ background: l.color }}
                    onClick={() => setLeg(i)}
                    data-cursor={l.name}
                    aria-label={l.name}
                  ></button>
                ))}
              </div>
            </div>
          </Reveal>

          {/* Dimensions */}
          <Reveal delay={540}>
            <div className="dim-row">
              <div className="dim"><span className="l">Width</span><span className="v">{SOFA.dimensions.w}</span></div>
              <div className="dim"><span className="l">Depth</span><span className="v">{SOFA.dimensions.d}</span></div>
              <div className="dim"><span className="l">Height</span><span className="v">{SOFA.dimensions.h}</span></div>
            </div>
          </Reveal>

          {/* Scale reference */}
          <Reveal delay={620}>
            <ScaleReference />
          </Reveal>

          <Reveal delay={700}>
            <div className="pdp-actions">
              <MagneticButton
                className="btn btn--solid"
                data-cursor="Order"
                onClick={() => {
                  window.Store.addToCart({
                    id: "sognefjord",
                    name: SOFA.name,
                    sub: SOFA.type,
                    price: 4820,
                    img: SOFA.upholstery[upholstery].img,
                    upholstery: SOFA.upholstery[upholstery].name,
                    upholsteryColor: SOFA.upholstery[upholstery].color,
                    leg: SOFA.legs[leg].name,
                    qty: 1,
                  });
                  window.Store.setUI({ cartOpen: true });
                }}
              >
                <span>Begin order — $4,820</span><span className="arrow">→</span>
              </MagneticButton>
              <MagneticButton className="btn btn--ghost" data-cursor="Save">
                <span>Request swatch set</span>
              </MagneticButton>
            </div>
          </Reveal>

          <Reveal delay={780}>
            <div className="t-small" style={{ marginTop: 16, display: "flex", gap: 24, color: "var(--ink-mute)" }}>
              <span>· Free white-glove delivery</span>
              <span>· 50-year frame warranty</span>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Craft story — through-tenon */}
      <section className="pdp-detail-block dark" data-screen-label="PDP Craft 1">
        <Reveal variant="img"><div className="img" style={{ backgroundImage: `url(${DETAIL_A})` }}></div></Reveal>
        <div className="col" style={{ gap: 28 }}>
          <Reveal><div className="t-eyebrow" style={{ color: "var(--accent)" }}>— The signature</div></Reveal>
          <h2 className="t-h2"><RevealLines lines={["A through-tenon", <span key="i" style={{ fontStyle: "italic" }}>at every joint.</span>]} gap={100} /></h2>
          <Reveal delay={400}>
            <p className="t-body t-body-lg" style={{ maxWidth: "42ch" }}>
              The load passes through a single piece of hand-shaped walnut, proud of the surface and finished by hand. It's the part of the sofa you'll notice from across the room — and the part that means the frame is held together by the wood itself, not by hardware. You can run a thumb across it without catching a single edge.
            </p>
          </Reveal>
          <Reveal delay={520}>
            <div className="t-mono" style={{ color: "rgba(242,235,224,0.55)" }}>Joinery — walnut through-tenon · hand-finished · oiled</div>
          </Reveal>
        </div>
      </section>

      {/* Materials & spec */}
      <section className="pdp-spec-table">
        <Reveal><div className="t-eyebrow" style={{ color: "var(--accent)" }}>— Materials & spec</div></Reveal>
        <Reveal delay={120}><h3 className="t-h2">Everything we know about<span style={{ fontStyle: "italic" }}> this sofa.</span></h3></Reveal>
        <Reveal delay={240}>
          <div className="grid" style={{ marginTop: 48, columnGap: 80 }}>
            <div>
              {[
                ["Frame", "Kiln-dried Vietnamese acacia, mortise-and-tenon joinery, glued and pinned"],
                ["Suspension", "Eight-way hand-tied steel coil springs over jute webbing"],
                ["Cushions", "High-resilience foam core wrapped in white-goose down-and-feather"],
                ["Upholstery", "Belgian linen, Italian mohair, English wool, or cotton bouclé"],
                ["Legs", "Acacia or walnut, exposed through-tenon at the joint"],
                ["Finish", "Six coats of hardwax oil, hand-rubbed with 0000 steel wool"],
              ].map(([l, v]) => (
                <div className="row" key={l}><div className="l">{l}</div><div className="v">{v}</div></div>
              ))}
            </div>
            <div>
              {[
                ["Dimensions", `${SOFA.dimensions.w} W × ${SOFA.dimensions.d} D × ${SOFA.dimensions.h} H`],
                ["Seat height", SOFA.dimensions.seat],
                ["Arm height", SOFA.dimensions.arm],
                ["Weight", "172 lbs"],
                ["Origin", "Designed in Los Angeles · Cut, joined, upholstered at our Vietnam atelier"],
                ["Warranty", "Fifty-year frame · five-year upholstery"],
              ].map(([l, v]) => (
                <div className="row" key={l}><div className="l">{l}</div><div className="v">{v}</div></div>
              ))}
            </div>
          </div>
        </Reveal>
      </section>

      {/* Second detail */}
      <section className="pdp-detail-block" data-screen-label="PDP Craft 2">
        <div className="col" style={{ gap: 28 }}>
          <Reveal><div className="t-eyebrow" style={{ color: "var(--accent)" }}>— The making</div></Reveal>
          <h2 className="t-h2"><RevealLines lines={["Eight weeks", <span key="i" style={{ fontStyle: "italic" }}>from order to door.</span>]} gap={100} /></h2>
          <Reveal delay={400}>
            <p className="t-body t-body-lg" style={{ maxWidth: "44ch", color: "var(--ink-soft)" }}>
              When you place an order, we cut the wood at our atelier. The frame takes ten days; it then sits for another ten while the wood settles. Upholstery is hand-stitched the week after. We send progress photographs once a week. Nothing is built in advance.
            </p>
          </Reveal>
        </div>
        <Reveal variant="img"><div className="img wide" style={{ backgroundImage: `url(${DETAIL_B})` }}></div></Reveal>
      </section>

      {/* Related */}
      <section className="related">
        <div className="head">
          <Reveal><h3 className="t-h2"><span style={{ fontStyle: "italic" }}>Along the same coast.</span></h3></Reveal>
          <Reveal delay={200}>
            <MagneticButton className="btn btn--ghost" data-cursor="View" onClick={() => onNavigate("plp")}>
              <span>All seating</span><span className="arrow">→</span>
            </MagneticButton>
          </Reveal>
        </div>
        <div className="related-grid">
          {[
            { name: "Lysefjord", sub: "Lounge Chair", price: "$2,640",
              img: "assets/lysefjord-lounge.jpg" },
            { name: "Trollfjord", sub: "Reading Chair", price: "$2,280",
              img: "assets/trollfjord-reading.jpg" },
            { name: "Boknafjord", sub: "Ottoman", price: "$980",
              img: "assets/boknafjord-ottoman.jpg" },
          ].map((p, i) => (
            <Reveal key={p.name} delay={i * 100} variant="img">
              <div onClick={() => onNavigate("pdp")} data-cursor="Open">
                <div style={{ aspectRatio: "4 / 5", backgroundImage: `url(${p.img})`, backgroundSize: "cover", backgroundPosition: "center", marginBottom: 18, backgroundColor: "var(--bone-deep)" }}></div>
                <div className="row" style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                  <div>
                    <div style={{ fontFamily: '"GT Sectra","Instrument Serif",serif', fontSize: 22 }}>{p.name}</div>
                    <div className="t-small">{p.sub}</div>
                  </div>
                  <div className="t-mono">{p.price}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

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

/* A small silhouette of a 5'10" person next to a sized sofa block, so dimensions feel real */
function ScaleReference() {
  return (
    <div style={{ marginTop: 8, paddingTop: 20, borderTop: "1px solid var(--line)" }}>
      <div className="t-mono" style={{ color: "var(--ink-mute)", marginBottom: 12 }}>To scale, alongside a 5'10" person</div>
      <svg viewBox="0 0 360 100" style={{ width: "100%", height: "auto", display: "block" }} fill="none">
        {/* ground line */}
        <line x1="0" y1="98" x2="360" y2="98" stroke="var(--ink)" strokeWidth="1" />
        {/* sofa (84 inches wide → ~280 px in this 360 viewbox) */}
        <g transform="translate(10, 28)">
          <rect x="0" y="22" width="280" height="34" stroke="var(--ink)" strokeWidth="1.4" fill="none" />
          {/* back */}
          <rect x="0" y="6" width="280" height="22" stroke="var(--ink)" strokeWidth="1.4" fill="none" />
          {/* legs */}
          <line x1="8" y1="56" x2="8" y2="70" stroke="var(--ink)" strokeWidth="1.4" />
          <line x1="272" y1="56" x2="272" y2="70" stroke="var(--ink)" strokeWidth="1.4" />
          {/* dim line */}
          <line x1="0" y1="82" x2="280" y2="82" stroke="var(--accent)" strokeWidth="0.8" strokeDasharray="2 3" />
          <text x="140" y="78" textAnchor="middle" fontFamily="DM Mono, monospace" fontSize="8.4" fill="var(--accent)" letterSpacing="1.5">84″</text>
        </g>
        {/* person — 5'10 ≈ 70 in → about 4/5 the height of the sofa back-to-floor visible portion. We'll draw a simple stick figure 76 px tall */}
        <g transform="translate(308, 22)" stroke="var(--ink)" strokeWidth="1.2" fill="none">
          <circle cx="12" cy="8" r="5.4" />
          <line x1="12" y1="14" x2="12" y2="58" />
          <line x1="12" y1="24" x2="2" y2="40" />
          <line x1="12" y1="24" x2="22" y2="40" />
          <line x1="12" y1="58" x2="4" y2="76" />
          <line x1="12" y1="58" x2="20" y2="76" />
        </g>
        <text x="320" y="92" textAnchor="middle" fontFamily="DM Mono, monospace" fontSize="8" fill="var(--ink-mute)" letterSpacing="1.5">5'10″</text>
      </svg>
    </div>
  );
}

window.PDPPage = PDPPage;