/* global React, Icon, Flower, GCMark, Eyebrow, Button */
// Espalhe Gardênias — shared editorial building blocks

// -------------------------------------------------------- Section header
function SectionHead({ kicker, title, intro, align = "center", titleSize = 42, light = false, maxw }) {
  const ink = light ? "var(--pessego)" : "var(--fg1)";
  const body = light ? "var(--fg-on-dark-soft)" : "var(--fg2)";
  return (
    <div style={{ textAlign: align, maxWidth: maxw || (align === "center" ? 740 : "none"),
      margin: align === "center" ? "0 auto" : 0 }}>
      {kicker && <Eyebrow color={light ? "#d08a63" : "var(--terracota)"}>{kicker}</Eyebrow>}
      <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: titleSize, lineHeight: 1.08,
        color: ink, margin: "16px 0 0", letterSpacing: "-.01em" }}>{title}</h2>
      {intro && <p style={{ fontFamily: "var(--font-body)", fontSize: 16, lineHeight: 1.72, color: body,
        marginTop: 20, maxWidth: align === "center" ? 640 : 560, marginLeft: align === "center" ? "auto" : 0,
        marginRight: align === "center" ? "auto" : 0 }}>{intro}</p>}
    </div>
  );
}

// -------------------------------------------------------- Big quote band
function QuoteBand({ children, attribution, bg = "var(--linen)", mark = true }) {
  return (
    <section style={{ background: bg, padding: "clamp(28px,4vw,52px) clamp(24px,5vw,40px) clamp(60px,8vw,96px)", textAlign: "center" }}>
      <style>{`
        @keyframes eg-mark-sway { 0%,100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-4px); } }
        .eg-mark-anim { display: inline-block; transform-origin: 50% 60%; animation: eg-mark-sway 5.5s ease-in-out infinite; }
      `}</style>
      <div style={{ maxWidth: 880, margin: "0 auto" }}>
        {mark && <div className="eg-mark-anim" style={{ margin: "0 auto 26px" }}><GCMark tone="vinho" size={52} /></div>}
        <p style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "clamp(22px,3vw,31px)", lineHeight: 1.42,
          color: "var(--fg1)" }}>{children}</p>
        {attribution && <div style={{ fontFamily: "var(--font-serif)", fontSize: 12.5, letterSpacing: ".24em",
          textTransform: "uppercase", color: "var(--terracota)", marginTop: 28 }}>{attribution}</div>}
      </div>
    </section>
  );
}


// -------------------------------------------------------- Manifesto strip (dark, ceremonial)
function ManifestoBand({ kicker, children, action, onAction, bg = "var(--vinho)" }) {
  return (
    <section style={{ background: bg, padding: "clamp(64px,9vw,104px) clamp(24px,5vw,40px)", textAlign: "center",
      position: "relative", overflow: "hidden" }}>
      <Flower which={1} simple={false} size={340} opacity={.07}
        style={{ position: "absolute", left: -70, bottom: -90 }} />
      <Flower which={2} simple={false} size={260} opacity={.06}
        style={{ position: "absolute", right: -50, top: -60, transform: "rotate(18deg)" }} />
      <div style={{ maxWidth: 860, margin: "0 auto", position: "relative" }}>
        {kicker && <Eyebrow color="#d08a63">{kicker}</Eyebrow>}
        <p style={{ fontFamily: "var(--font-serif)", fontSize: "clamp(24px,3.4vw,38px)", lineHeight: 1.32,
          color: "var(--pessego)", margin: "24px 0 0", letterSpacing: ".01em" }}>{children}</p>
        {action && <div style={{ marginTop: 38 }}><Button variant="outlineLight" onClick={onAction}>{action}</Button></div>}
      </div>
    </section>
  );
}

// -------------------------------------------------------- Inner page hero (image)
function PageHero({ kicker, title, intro, image, pos = "center 18%", height = 520, children, align = "left" }) {
  return (
    <section style={{ position: "relative", minHeight: height, marginTop: -82, overflow: "hidden", background: "var(--vinho)" }}>
      {image && <img src={assetURL(image)} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%",
        objectFit: "cover", objectPosition: pos }} />}
      <div style={{ position: "absolute", inset: 0, background: align === "center"
        ? "rgba(44,20,20,.5)"
        : "linear-gradient(90deg, rgba(44,20,20,.82) 0%, rgba(44,20,20,.5) 44%, rgba(44,20,20,.08) 78%)" }} />
      <div style={{ position: "relative", maxWidth: 1280, margin: "0 auto", padding: "0 clamp(24px,5vw,40px)",
        minHeight: height, display: "flex", flexDirection: "column", justifyContent: "center",
        alignItems: align === "center" ? "center" : "flex-start",
        textAlign: align === "center" ? "center" : "left", paddingTop: 110, paddingBottom: 56 }}>
        <div style={{ maxWidth: align === "center" ? 760 : 600 }}>
          <Eyebrow color="var(--pessego)">{kicker}</Eyebrow>
          <h1 style={{ fontFamily: "var(--font-serif)", textTransform: "uppercase", color: "var(--pessego)",
            fontSize: "clamp(34px,5vw,56px)", lineHeight: 1.04, letterSpacing: ".01em", margin: "22px 0 0" }}>{title}</h1>
          {intro && <p style={{ fontFamily: "var(--font-body)", fontSize: 16.5, lineHeight: 1.68, color: "var(--pessego)",
            opacity: .92, marginTop: 22, maxWidth: 480, marginLeft: align === "center" ? "auto" : 0,
            marginRight: align === "center" ? "auto" : 0 }}>{intro}</p>}
          {children && <div style={{ marginTop: 32, display: "flex", gap: 14, flexWrap: "wrap",
            justifyContent: align === "center" ? "center" : "flex-start" }}>{children}</div>}
        </div>
      </div>
    </section>
  );
}

// -------------------------------------------------------- Simple light hero (no photo)
function PlainHero({ kicker, title, intro, bg = "var(--blush)", children }) {
  return (
    <section style={{ background: bg, padding: "clamp(120px,15vw,150px) clamp(24px,5vw,40px) clamp(50px,7vw,68px)",
      marginTop: -82, textAlign: "center", position: "relative", overflow: "hidden" }}>
      <Flower which={2} simple={true} size={200} opacity={.12}
        style={{ position: "absolute", right: -30, top: 40, transform: "rotate(-10deg)" }} />
      <div style={{ maxWidth: 760, margin: "0 auto", position: "relative" }}>
        <Eyebrow>{kicker}</Eyebrow>
        <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "clamp(36px,5vw,50px)",
          color: "var(--fg1)", marginTop: 16, lineHeight: 1.05, letterSpacing: "-.01em" }}>{title}</h1>
        {intro && <p style={{ fontFamily: "var(--font-body)", fontSize: 16.5, lineHeight: 1.7, color: "var(--fg2)",
          marginTop: 20, maxWidth: 600, marginLeft: "auto", marginRight: "auto" }}>{intro}</p>}
        {children && <div style={{ marginTop: 32, display: "flex", gap: 14, flexWrap: "wrap", justifyContent: "center" }}>{children}</div>}
      </div>
    </section>
  );
}

// -------------------------------------------------------- Press strip
function PressStrip() {
  const veiculos = ["BAND RIO", "GRANDE RIO", "VOGUE", "REVISTA J.P", "GLOBO", "METRÓPOLES"];
  return (
    <section style={{ background: "var(--cream)", padding: "46px clamp(24px,5vw,40px)",
      borderTop: "1px solid var(--border-faint)", borderBottom: "1px solid var(--border-faint)" }}>
      <style>{`
        .eg-press{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px}
        .eg-press .eg-press-label{flex:0 0 auto}
        .eg-press .eg-press-items{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;justify-content:flex-end;flex:1}
        @media (max-width:760px){
          .eg-press{flex-direction:column;align-items:center;text-align:center;gap:18px}
          .eg-press .eg-press-items{justify-content:center;gap:12px 22px}
        }
      `}</style>
      <div className="eg-press">
        <span className="eg-press-label" style={{ fontFamily: "var(--font-serif)", fontSize: 11, letterSpacing: ".26em", textTransform: "uppercase", color: "var(--terracota)" }}>Na mídia</span>
        <div className="eg-press-items">
          {veiculos.map((v) => (
            <span key={v} style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 15, letterSpacing: ".08em",
              color: "var(--fg3)", opacity: .82, whiteSpace: "nowrap" }}>{v}</span>
          ))}
        </div>
      </div>
    </section>
  );
}


// -------------------------------------------------------- Newsletter / launch capture
function LaunchCTA({ kicker = "Faça parte do movimento", title = "Acompanhe a nova fase",
  text = "Receba bastidores, trechos do livro e novidades de “Espalhe Gardênias”, direto da fonte." }) {
  return (
    <section style={{ background: "var(--blush)", padding: "clamp(64px,9vw,96px) clamp(24px,5vw,40px)", position: "relative", overflow: "hidden" }}>
      <Flower which={2} simple={false} size={240} opacity={.13}
        style={{ position: "absolute", right: -30, bottom: -40, transform: "rotate(-12deg)" }} />
      <div style={{ maxWidth: 580, margin: "0 auto", textAlign: "center", position: "relative" }}>
        <Eyebrow>{kicker}</Eyebrow>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "clamp(30px,4vw,38px)",
          color: "var(--fg1)", marginTop: 16, marginBottom: 14 }}>{title}</h2>
        <p style={{ fontFamily: "var(--font-body)", fontSize: 15, lineHeight: 1.65, color: "var(--fg2)", marginBottom: 30 }}>{text}</p>
        <form onSubmit={(e) => e.preventDefault()} className="eg-news" style={{ display: "flex", maxWidth: 460, margin: "0 auto" }}>
          <input placeholder="Seu melhor e-mail" aria-label="E-mail"
            style={{ flex: 1, fontFamily: "var(--font-body)", fontSize: 14, padding: "15px 18px",
              background: "var(--cream)", border: "1px solid var(--border)", borderRight: "none", borderRadius: 0, color: "var(--fg1)" }} />
          <Button variant="dark">Quero receber</Button>
        </form>
      </div>
    </section>
  );
}

// -------------------------------------------------------- Three-up (verbs / pillars) in a bordered grid
function TriadGrid({ items, light = false }) {
  const border = light ? "1px solid rgba(243,231,218,.18)" : "1px solid var(--border-faint)";
  return (
    <div className="eg-triad" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 0, border }}>
      {items.map((p, i) => (
        <div key={p.t} className="eg-triad-cell" style={{ padding: "clamp(30px,4vw,46px) clamp(26px,3vw,38px)",
          borderRight: i < 2 ? border : "none" }}>
          {p.i && <Icon name={p.i} size={28} color="var(--terracota)" />}
          {p.n && <div style={{ fontFamily: "var(--font-serif)", fontSize: 13, letterSpacing: ".2em",
            color: "var(--terracota)", marginBottom: 6 }}>{p.n}</div>}
          <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 23,
            color: light ? "var(--pessego)" : "var(--fg1)", margin: p.i ? "18px 0 12px" : "0 0 12px" }}>{p.t}</h3>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 14.5, lineHeight: 1.68,
            color: light ? "var(--fg-on-dark-soft)" : "var(--fg2)" }}>{p.d}</p>
        </div>
      ))}
    </div>
  );
}

// -------------------------------------------------------- Editorial split (image | text)
function EditorialSplit({ image, pos = "center", reverse = false, eyebrow, title, children, action, onAction,
  dark = false, serifTitle = false, flower }) {
  const bg = dark ? "var(--vinho)" : "var(--cream)";
  const ink = dark ? "var(--pessego)" : "var(--fg1)";
  const body = dark ? "var(--fg-on-dark-soft)" : "var(--fg2)";
  const imgPane = <div key="img" style={{ minHeight: 540, backgroundImage: `url('${assetURL(image)}')`, backgroundSize: "cover",
    backgroundPosition: pos }} />;
  const txtPane = (
    <div key="txt" style={{ display: "flex", flexDirection: "column", justifyContent: "center",
      padding: "clamp(48px,6vw,84px)", position: "relative", background: bg }}>
      {flower && <Flower which={flower} simple={true} size={120} opacity={dark ? .16 : .12}
        style={{ position: "absolute", top: 40, right: 48 }} />}
      {eyebrow && <Eyebrow color={dark ? "#d08a63" : "var(--terracota)"}>{eyebrow}</Eyebrow>}
      <h2 style={{ fontFamily: serifTitle ? "var(--font-serif)" : "var(--font-display)",
        fontWeight: serifTitle ? 400 : 500, textTransform: serifTitle ? "uppercase" : "none",
        fontSize: "clamp(28px,3.6vw,42px)", lineHeight: 1.08, color: ink, margin: "18px 0 18px",
        letterSpacing: serifTitle ? ".02em" : "-.01em" }}>{title}</h2>
      <div style={{ fontFamily: "var(--font-body)", fontSize: 15.5, lineHeight: 1.78, color: body, maxWidth: 460 }}>{children}</div>
      {action && <div style={{ marginTop: 30 }}><Button variant={dark ? "outlineLight" : "primary"} onClick={onAction}>{action}</Button></div>
      }
    </div>
  );
  return (
    <section className="eg-split" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", background: bg }}>
      {reverse ? [txtPane, imgPane] : [imgPane, txtPane]}
    </section>
  );
}

Object.assign(window, { SectionHead, QuoteBand, ManifestoBand, PageHero, PlainHero, PressStrip, LaunchCTA, TriadGrid, EditorialSplit });