/* design-push.jsx — three design moves pushing the page from 7.8 → 9+
   • TypographicBreak — a 200px+ single-line title moment, magazine-spread style
   • ForHer — full-bleed hot-pink rule-breaker that speaks AS the book
   • TreeMark — signature ornament reusable at section eyebrows */

const { useState: useStateDP, useEffect: useEffDP, useRef: useRefDP } = React;

/* ─────────── A. Typographic break ───────────
   One huge single-line word/phrase, set tighter than anything else on the page,
   with a hairline above and a tiny line of editorial chrome below.
   Sits between Hero and the rest of the page — like a magazine spread title page. */

function TypographicBreak({ palette }){
  return (
    <section data-screen-label="03 Title Spread" style={{ background: palette.bg, padding:"clamp(40px, 8vw, 110px) 0 clamp(40px, 8vw, 110px)", position:"relative", overflow:"hidden" }}>
      <div className="container">
        {/* top chrome */}
        <div style={{ display:"flex", alignItems:"center", justifyContent:"space-between", paddingBottom:18, borderBottom:`1px solid ${palette.line}` }}>
          <div className="latin" style={{ fontSize:11, letterSpacing:".32em", color: palette.ink2, fontWeight:600 }}>AGES 11—14</div>
          <div style={{ display:"flex", alignItems:"center", gap:10, fontSize:11, color: palette.ink2, letterSpacing:".18em", textTransform:"uppercase" }}>
            <TreeMark palette={palette} size={16}/>
            <span>{COPY.heroEyebrow}</span>
          </div>
          <div className="latin" style={{ fontSize:11, letterSpacing:".32em", color: palette.ink2, fontWeight:600 }}>BOOK</div>
        </div>

        {/* the giant word(s) */}
        <Reveal>
          <h2 className="display" style={{
            fontSize:"clamp(72px, 18vw, 280px)",
            lineHeight:.92,
            letterSpacing:"-.04em",
            margin:"clamp(28px, 5vw, 64px) 0 clamp(20px, 3vw, 36px)",
            textAlign:"center",
            color: palette.ink,
            fontWeight:700,
          }}>
            <span>{COPY.heroTitleTop} </span>
            <span style={{ fontStyle:"italic", color: palette.accent, fontWeight:500 }}>{COPY.heroTitleAccent}</span>
          </h2>
        </Reveal>

        {/* bottom chrome */}
        <div style={{ display:"flex", alignItems:"center", justifyContent:"space-between", paddingTop:18, borderTop:`1px solid ${palette.line}` }}>
          <div style={{ fontSize:13, color: palette.ink2, fontStyle:"italic", fontFamily:"Cormorant Garamond, serif" }}>{COPY.heroByline}</div>
          <div className="eyebrow" style={{ color: palette.accent, display:"flex", alignItems:"center", gap:10 }}>
            <span>{C("home.trust.sealTitle", "")}</span>
          </div>
          <div className="latin" style={{ fontSize:11, letterSpacing:".32em", color: palette.ink2, fontWeight:600 }}>ages 11—14</div>
        </div>
      </div>

      <style>{`
        @media (max-width: 720px){
          [data-screen-label="03 Title Spread"] .container > div:first-child > .latin:last-child,
          [data-screen-label="03 Title Spread"] .container > div:last-child > .latin:last-child {
            display: none;
          }
        }
      `}</style>
    </section>
  );
}

/* ─────────── B. ForHer — hot-pink rule-breaker ───────────
   A full-bleed hot pink section that uses the book's own visual energy.
   Doodles scattered, bold black sans, English-tagline DNA. Speaks AS the book — to the girl.
   Sits AFTER the editorial setup so the contrast lands. */

const HOT_PINK = "#E91D62";
const HOT_PINK_DARK = "#B8154C";

function ForHer({ palette }){
  const c = C("home.forHer", {});
  const rotations = [-2, 1, -1, 2, -1.5];
  return (
    <section data-screen-label="11 For Her" style={{ background: HOT_PINK, color:"#fff", position:"relative", overflow:"hidden", padding:"clamp(64px, 9vw, 120px) 0" }}>
      {/* doodle field */}
      <DoodleField/>
      <div className="container" style={{ position:"relative", zIndex:2 }}>
        <div className="fh-grid" style={{ display:"grid", gridTemplateColumns:"1.2fr .8fr", gap:48, alignItems:"center" }}>
          <div>
            <div style={{ display:"inline-flex", alignItems:"center", gap:8, padding:"6px 14px", background:"#fff", color:HOT_PINK_DARK, borderRadius:999, fontSize:12, fontWeight:700, letterSpacing:".08em", marginBottom:26 }}>
              <span style={{ width:6, height:6, borderRadius:999, background:HOT_PINK_DARK }}/>
              {c.badge}
            </div>
            <h2 style={{
              fontFamily:'"Frank Ruhl Libre", "Noto Serif Hebrew", serif',
              fontSize:"clamp(40px, 6vw, 84px)",
              lineHeight:1.0,
              letterSpacing:"-.02em",
              fontWeight:800,
              margin:"0 0 24px",
              color:"#fff",
            }}>
              {c.linePre}<span style={{ display:"inline-block", position:"relative" }}>
                <span style={{ position:"relative", zIndex:2 }}>{c.lineStrike}</span>
                <span aria-hidden="true" style={{ position:"absolute", insetInlineStart:-4, insetInlineEnd:-4, top:"50%", height:8, background:"#fff", opacity:.95, transform:"rotate(-2deg)", zIndex:1 }}/>
              </span>.<br/>
              <span style={{ fontStyle:"italic", fontWeight:600 }}>{c.lineMidPre}</span>
              <span style={{ background:"#fff", color: HOT_PINK_DARK, padding:"0 12px", display:"inline-block", transform:"rotate(-1deg)", fontStyle:"italic" }}>{c.lineHighlight}</span>.
            </h2>
            <p style={{ fontSize:"clamp(16px, 1.4vw, 19px)", lineHeight:1.6, color:"rgba(255,255,255,.92)", maxWidth:"42ch", margin:"0 0 32px" }}>
              {rt(c.text, "#fff", true)}
            </p>
            <div style={{ display:"flex", flexWrap:"wrap", gap:12, marginBottom:34 }}>
              {(c.hashtags || []).map((h,i)=>(
                <span key={i} style={{
                  fontFamily:"ui-sans-serif, system-ui, sans-serif",
                  background:"rgba(255,255,255,.14)",
                  color:"#fff",
                  border:"1.5px solid rgba(255,255,255,.4)",
                  padding:"7px 14px", borderRadius:999, fontSize:13, fontWeight:600,
                  transform:`rotate(${rotations[i % rotations.length]}deg)`,
                }}>{h}</span>
              ))}
            </div>
            <div style={{ display:"flex", alignItems:"center", gap:18, flexWrap:"wrap" }}>
              <a href={c.ctaHref || "/sample"} style={{
                background:"#fff", color: HOT_PINK_DARK, border:0,
                padding:"16px 28px", borderRadius:999, fontSize:15, fontWeight:800,
                letterSpacing:".02em", display:"inline-flex", alignItems:"center", gap:8,
                boxShadow:"0 20px 40px -10px rgba(0,0,0,.25)",
              }}>
                {c.ctaLabel} <IconArrowL size={16} stroke={HOT_PINK_DARK} strokeWidth={2.2}/>
              </a>
              <div style={{ fontSize:13, color:"rgba(255,255,255,.78)", fontStyle:"italic", fontFamily:'"Cormorant Garamond", serif' }}>{c.ctaNote}</div>
            </div>
          </div>

          <div style={{ position:"relative", display:"grid", placeItems:"center", padding:24 }}>
            {/* circular sticker around the cover */}
            <CircularStamp palette={palette} text={c.stampText}/>
            {c.image && <img src={productImageSrc(c.image)} alt="" style={{ position:"relative", maxWidth:"82%", height:"auto", filter:"drop-shadow(0 40px 60px rgba(0,0,0,.4))", transform:"rotate(4deg)" }}/>}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px){
          .fh-grid{ grid-template-columns: 1fr !important; }
          .fh-grid > div:last-child{ order: -1; }
        }
      `}</style>
    </section>
  );
}

function DoodleField(){
  const items = [
    { kind:"heart",  x:"6%",   y:"12%", r:-12, s:1.0 },
    { kind:"spark",  x:"22%",  y:"82%", r:8,   s:1.2 },
    { kind:"arrow",  x:"40%",  y:"10%", r:-4,  s:.9 },
    { kind:"star",   x:"58%",  y:"86%", r:14,  s:1.0 },
    { kind:"plane",  x:"82%",  y:"22%", r:-20, s:1.1 },
    { kind:"loop",   x:"92%",  y:"70%", r:6,   s:1.0 },
    { kind:"smile",  x:"12%",  y:"55%", r:-6,  s:.9 },
    { kind:"hash",   x:"36%",  y:"42%", r:-3,  s:.8 },
    { kind:"bolt",   x:"68%",  y:"50%", r:10,  s:.9 },
    { kind:"hearts", x:"50%",  y:"4%",  r:0,   s:.8 },
    { kind:"squig",  x:"80%",  y:"92%", r:-8,  s:1.0 },
  ];
  return (
    <div aria-hidden="true" style={{ position:"absolute", inset:0, pointerEvents:"none", zIndex:1 }}>
      {items.map((d,i)=>(
        <span key={i} style={{
          position:"absolute", insetInlineStart:d.x, top:d.y, transform:`translate(-50%, -50%) rotate(${d.r}deg) scale(${d.s})`,
          color:"#fff", opacity:.85,
        }}>
          <Doodle kind={d.kind}/>
        </span>
      ))}
    </div>
  );
}

function Doodle({ kind }){
  const stroke = "#fff", sw = 2.4, sz = 56;
  const P = (d) => <svg width={sz} height={sz} viewBox="0 0 56 56" fill="none" stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round"><path d={d}/></svg>;
  switch(kind){
    case "heart": return <svg width="56" height="56" viewBox="0 0 56 56" fill="none" stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round"><path d="M28 46s-16-9-16-22a8 8 0 0 1 16-4 8 8 0 0 1 16 4c0 13-16 22-16 22z"/></svg>;
    case "spark": return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke={stroke} strokeWidth={sw} strokeLinecap="round"><path d="M24 6v10M24 32v10M6 24h10M32 24h10M10 10l7 7M31 31l7 7M10 38l7-7M31 17l7-7"/></svg>;
    case "arrow": return <svg width="64" height="40" viewBox="0 0 64 40" fill="none" stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round"><path d="M6 20 Q 22 4 38 14 T 58 20"/><path d="M50 12l8 8-8 8"/></svg>;
    case "star":  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round"><path d="M24 6l5 11 12 1-9 8 3 12-11-6-11 6 3-12-9-8 12-1 5-11z"/></svg>;
    case "plane": return <svg width="56" height="48" viewBox="0 0 56 48" fill="none" stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round"><path d="M4 24 L 52 6 L 38 44 L 26 28 Z M 26 28 L 4 24"/></svg>;
    case "loop":  return <svg width="64" height="48" viewBox="0 0 64 48" fill="none" stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round"><path d="M4 24 Q 14 4 24 24 T 44 24 Q 52 24 58 18"/></svg>;
    case "smile": return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round"><circle cx="24" cy="24" r="18"/><path d="M16 28 Q 24 36 32 28"/><circle cx="18" cy="20" r="1.5" fill={stroke}/><circle cx="30" cy="20" r="1.5" fill={stroke}/></svg>;
    case "hash":  return <svg width="56" height="56" viewBox="0 0 56 56" fill="none" stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round"><path d="M16 8v40M32 8v40M8 18h40M8 38h40"/></svg>;
    case "bolt":  return <svg width="40" height="56" viewBox="0 0 40 56" fill="none" stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round"><path d="M22 4 L 8 30 L 20 30 L 16 52 L 32 24 L 20 24 L 24 4 Z"/></svg>;
    case "hearts": return <svg width="72" height="40" viewBox="0 0 72 40" fill="none" stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round"><path d="M14 32s-8-6-8-14a4 4 0 0 1 8-2 4 4 0 0 1 8 2c0 8-8 14-8 14z"/><path d="M40 32s-8-6-8-14a4 4 0 0 1 8-2 4 4 0 0 1 8 2c0 8-8 14-8 14z"/><path d="M62 32s-6-4-6-10a3 3 0 0 1 6-2 3 3 0 0 1 6 2c0 6-6 10-6 10z"/></svg>;
    case "squig": return <svg width="72" height="32" viewBox="0 0 72 32" fill="none" stroke={stroke} strokeWidth={sw} strokeLinecap="round"><path d="M4 16 Q 12 4 20 16 T 36 16 T 52 16 T 68 16"/></svg>;
    default: return null;
  }
}

function CircularStamp({ palette, text }){
  const repeated = String(text || "READ · THINK · GROW · DREAM · ").repeat(3);
  return (
    <svg viewBox="0 0 360 360" width="360" height="360" style={{ position:"absolute", inset:"50% auto auto 50%", transform:"translate(-50%, -50%) rotate(-8deg)", animation:"rot 50s linear infinite", maxWidth:"95%" }} aria-hidden="true">
      <defs>
        <path id="circ" d="M 180,180 m -150,0 a 150,150 0 1,1 300,0 a 150,150 0 1,1 -300,0" fill="none"/>
      </defs>
      <circle cx="180" cy="180" r="150" fill="none" stroke="#fff" strokeWidth="1.5" opacity=".6"/>
      <circle cx="180" cy="180" r="158" fill="none" stroke="#fff" strokeWidth=".8" opacity=".4"/>
      <text fill="#fff" fontSize="13" fontFamily='ui-monospace, "Cormorant Garamond", serif' fontWeight="700" letterSpacing="4">
        <textPath href="#circ" startOffset="0">{repeated}</textPath>
      </text>
      <style>{`
        @keyframes rot { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
      `}</style>
    </svg>
  );
}

/* ─────────── C. TreeMark — signature ornament ─────────── */
function TreeMark({ palette, size = 18, color }){
  const c = color || palette.accent;
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true" style={{ display:"inline-block", verticalAlign:"middle" }}>
      <path d="M12 21 L 12 13" stroke={c} strokeWidth="1.4" strokeLinecap="round"/>
      <circle cx="12" cy="9" r="5" fill={c} opacity=".25"/>
      <circle cx="9"  cy="11" r="3" fill={c} opacity=".35"/>
      <circle cx="15" cy="10" r="3.5" fill={c} opacity=".30"/>
      <circle cx="12" cy="6" r="2.5" fill={c} opacity=".45"/>
      <circle cx="14" cy="8" r=".9" fill={c}/>
      <circle cx="10" cy="11" r=".7" fill={c}/>
      <path d="M8 21h8" stroke={c} strokeWidth=".8" strokeDasharray="1.5 2" opacity=".55"/>
    </svg>
  );
}

Object.assign(window, { TypographicBreak, ForHer, TreeMark, Doodle });