// Shift for Good — social shareable templates (Instagram square + story)
// These are post-action shareables: "Ik deed mee aan X als Shift for Good-lid"

function SfgShareSquare({ name = "Anna", action = "Sleep Out", partner = "Sheltersuit", date = "21 nov 2026", scale = 1 }) {
  const W = 540, H = 540; // visual size (scaled down from 1080)
  return (
    <div style={{
      width: W * scale, height: H * scale,
      borderRadius: 24, overflow: "hidden",
      position: "relative",
      transform: "translateZ(0)",
    }}>
      <div style={{position: "absolute", inset: 0}}>
        <SfgPhoto tone="dusk" style={{position: "absolute", inset: 0}}/>
      </div>
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.85) 100%)",
      }}/>
      {/* top bar */}
      <div style={{
        position: "absolute", top: 24 * scale, left: 24 * scale, right: 24 * scale,
        display: "flex", alignItems: "center", justifyContent: "space-between",
      }}>
        <SfgLogo color="white" size={28 * scale}/>
        <div style={{
          padding: `${6*scale}px ${12*scale}px`, background: "var(--gs-orange)",
          color: "#fff", borderRadius: 999,
          fontFamily: "var(--gs-font-body)", fontWeight: 700, fontSize: 12 * scale,
          letterSpacing: "0.04em",
        }}>action stamp</div>
      </div>
      {/* center stamp */}
      <div style={{
        position: "absolute", top: "38%", left: "50%",
        transform: "translate(-50%,-50%)",
        width: 200 * scale, height: 200 * scale,
        borderRadius: "50%",
        background: "var(--gs-yellow)",
        display: "grid", placeItems: "center",
        color: "var(--gs-text)",
        textAlign: "center",
        boxShadow: "0 16px 48px rgba(0,0,0,0.4)",
      }}>
        <div>
          <div style={{fontFamily: "var(--gs-font-body)", fontSize: 11 * scale, fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase"}}>I did the</div>
          <div style={{fontFamily: "var(--gs-font-display)", fontSize: 30 * scale, fontWeight: 800, lineHeight: 1, margin: "6px 0", letterSpacing: "-0.02em"}}>{action}</div>
          <div style={{fontFamily: "var(--gs-font-body)", fontSize: 11 * scale, fontWeight: 700, letterSpacing: "0.04em"}}>{date}</div>
        </div>
      </div>
      {/* bottom copy */}
      <div style={{
        position: "absolute", bottom: 28 * scale, left: 28 * scale, right: 28 * scale,
        color: "#fff",
      }}>
        <div style={{
          fontFamily: "var(--gs-font-display)", fontWeight: 800,
          fontSize: 34 * scale, lineHeight: 1, letterSpacing: "-0.02em",
        }}>{name} <span style={{color: "var(--gs-yellow)"}}>deed</span> iets goeds.</div>
        <div style={{
          marginTop: 8 * scale,
          fontFamily: "var(--gs-font-body)", fontWeight: 500,
          fontSize: 14 * scale, opacity: 0.85,
        }}>met {partner} · shiftforgood.nl</div>
      </div>
    </div>
  );
}

function SfgShareStory({ name = "Anna", action = "Sleep Out", partner = "Sheltersuit", date = "21 nov 2026", scale = 1 }) {
  const W = 304, H = 540; // visual size (scaled down from 1080×1920)
  return (
    <div style={{
      width: W * scale, height: H * scale,
      borderRadius: 24, overflow: "hidden",
      position: "relative",
    }}>
      <div style={{position: "absolute", inset: 0}}>
        <SfgPhoto tone="plum" style={{position: "absolute", inset: 0}}/>
      </div>
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.85) 100%)",
      }}/>
      {/* top */}
      <div style={{
        position: "absolute", top: 28 * scale, left: 24 * scale, right: 24 * scale,
        display: "flex", alignItems: "center", justifyContent: "space-between",
      }}>
        <SfgLogo color="white" size={26 * scale}/>
      </div>
      {/* middle */}
      <div style={{
        position: "absolute", top: "30%", left: 28 * scale, right: 28 * scale, color: "#fff",
      }}>
        <div style={{
          fontFamily: "var(--gs-font-body)", fontSize: 11 * scale, fontWeight: 700,
          letterSpacing: "0.16em", textTransform: "uppercase", opacity: 0.85,
        }}>ik deed mee aan</div>
        <div style={{
          fontFamily: "var(--gs-font-display)", fontWeight: 800,
          fontSize: 48 * scale, lineHeight: 0.95, letterSpacing: "-0.02em",
          marginTop: 10 * scale,
        }}>{action}</div>
        <div style={{
          fontFamily: "var(--gs-font-display)", fontWeight: 800,
          fontSize: 22 * scale, lineHeight: 1, marginTop: 8 * scale,
          color: "var(--gs-yellow)",
        }}>als shift for good-lid.</div>
      </div>
      {/* stamp */}
      <div style={{
        position: "absolute", top: "60%", left: "50%",
        transform: "translate(-50%, 0) rotate(-8deg)",
        width: 130 * scale, height: 130 * scale,
        borderRadius: "50%",
        background: "var(--gs-orange)",
        display: "grid", placeItems: "center",
        color: "#fff", textAlign: "center",
        boxShadow: "0 16px 48px rgba(0,0,0,0.4)",
      }}>
        <div>
          <div style={{fontFamily:"var(--gs-font-display)", fontSize: 14 * scale, fontWeight: 800, letterSpacing: "-0.01em"}}>stamp #</div>
          <div style={{fontFamily:"var(--gs-font-display)", fontSize: 30 * scale, fontWeight: 800, lineHeight: 1}}>001</div>
          <div style={{fontFamily:"var(--gs-font-body)", fontSize: 9 * scale, fontWeight: 700, letterSpacing: "0.08em", marginTop: 4*scale}}>{date}</div>
        </div>
      </div>
      {/* bottom */}
      <div style={{
        position: "absolute", bottom: 28 * scale, left: 28 * scale, right: 28 * scale,
        color: "#fff",
      }}>
        <div style={{
          fontFamily: "var(--gs-font-body)", fontSize: 13 * scale, fontWeight: 600,
          opacity: 0.85,
        }}>met {partner}</div>
        <div style={{
          marginTop: 6 * scale,
          fontFamily: "var(--gs-font-display)", fontSize: 18 * scale, fontWeight: 800,
          letterSpacing: "-0.01em",
        }}>doe mee — shiftforgood.nl</div>
      </div>
    </div>
  );
}

function SfgShareables() {
  return (
    <section className="sfg-section bg-ink">
      <div className="sfg-container">
        <div className="sfg-section-head">
          <div>
            <span className="sfg-eyebrow">na elke actie</span>
            <h2 className="sfg-h1" style={{color: "var(--gs-white)"}}>Een shareable<br/>die je echt post.</h2>
          </div>
          <p className="sfg-lead" style={{color: "rgba(255,255,255,0.85)"}}>
            Na elke actie genereren we automatisch jouw social card — vierkant voor de feed, vertical voor je story. Naam, actie, partner, datum. Klaar om te delen.
          </p>
        </div>
        <div className="sfg-shareables">
          <div className="sfg-shareable">
            <span className="frame-label">1080 × 1080 · feed</span>
            <SfgShareSquare name="Anna" action="Sleep Out" partner="Sheltersuit" date="21 nov 2026" scale={1.6}/>
          </div>
          <div className="sfg-shareable" style={{justifySelf: "center"}}>
            <span className="frame-label">1080 × 1920 · story</span>
            <SfgShareStory name="Anna" action="Sleep Out" partner="Sheltersuit" date="21 nov 2026" scale={1.6}/>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SfgShareSquare, SfgShareStory, SfgShareables });