/* Email templates · visual mockups */

function EmailFrame({ subject, from = "InsideJams <hi@insidejams.fm>", to = "alex@example.com", children }) {
  return (
    <div style={{ background: "#e7e5df", padding: 18, borderRadius: 12, border: "1px solid var(--line)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", fontFamily: "var(--f-mono)", fontSize: 11, opacity: 0.6, marginBottom: 10, letterSpacing: "0.06em" }}>
        <span>FROM · {from}</span>
        <span>TO · {to}</span>
      </div>
      <div style={{ fontFamily: "var(--f-display)", fontSize: 22, fontStyle: "italic", marginBottom: 12 }}>{subject}</div>
      <div style={{ background: "#fff", borderRadius: 8, padding: 28, color: "#1a1a1a" }}>
        {children}
      </div>
    </div>
  );
}

function EmailHeader() {
  return (
    <div style={{ paddingBottom: 18, borderBottom: "1px solid #eee", marginBottom: 24, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
      <Logo color="#1a1a1a"/>
      <span style={{ fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.1em", opacity: 0.5 }}>SIDE A · NEW</span>
    </div>
  );
}

function EmailFooter() {
  return (
    <div style={{ marginTop: 28, paddingTop: 18, borderTop: "1px solid #eee", fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.06em", opacity: 0.5, textAlign: "center" }}>
      INSIDEJAMS · UNLISTED RECORDINGS · HI@INSIDEJAMS.FM
    </div>
  );
}

function EmailIntake() {
  return (
    <EmailFrame subject="Now tell us the good stuff →">
      <EmailHeader/>
      <span style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.08em", opacity: 0.6 }}>PAYMENT CONFIRMED · ORDER #IJ-2046</span>
      <h1 style={{ fontFamily: "var(--f-display)", fontWeight: 400, fontSize: 36, margin: "12px 0 8px", lineHeight: 1.1, letterSpacing: "-0.01em" }}>Now the <em>fun</em> part.</h1>
      <p style={{ fontSize: 15, lineHeight: 1.55, color: "#444" }}>
        Hey Alex · payment received. Click below to give us the inside-jokes-and-specifics that make Maya's song actually her.
      </p>
      <div style={{ background: "#FAF1DF", padding: 18, borderRadius: 8, marginTop: 20, fontSize: 14, color: "#1a1a1a" }}>
        <strong>Quick Jam · for Maya</strong><br/>
        Roast · Pop anthem · 30th birthday<br/>
        <span style={{ fontFamily: "var(--f-mono)", fontSize: 11, opacity: 0.65 }}>ETA: under 10 min after intake</span>
      </div>
      <a href="#" style={{ display: "inline-block", marginTop: 24, padding: "14px 22px", borderRadius: 999, background: "#FF5C39", color: "#fff", textDecoration: "none", fontWeight: 600, fontSize: 15 }}>Complete intake →</a>
      <p style={{ fontSize: 12, color: "#888", marginTop: 18, lineHeight: 1.5 }}>
        Your link stays active for 30 days. We'll send a reminder if you haven't filled it out within 24 hours.
      </p>
      <EmailFooter/>
    </EmailFrame>
  );
}

function EmailDelivery() {
  const deliveryTraits = createPrototypeCassetteTraits({
    seed: "email-delivery-maya-roast",
    recipient: "Maya",
    occasion: "30th birthday",
    title: "The Ballad of May-May",
    songType: "Roast",
    genre: "Pop anthem",
    tier: "Quick",
    durationSeconds: 54,
  });
  const deliveryTape = getPrototypeCassettePreviewProps(deliveryTraits, { includeEdition: false });
  return (
    <EmailFrame subject="Maya's song is ready 🎧">
      <EmailHeader/>
      <span style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.08em", opacity: 0.6 }}>DELIVERED · ORDER #IJ-2046</span>
      <h1 style={{ fontFamily: "var(--f-display)", fontWeight: 400, fontSize: 36, margin: "12px 0 8px", lineHeight: 1.1, letterSpacing: "-0.01em" }}>It's <em>done</em>. And it's good.</h1>
      <p style={{ fontSize: 15, lineHeight: 1.55, color: "#444" }}>
        "The Ballad of May-May" is ready. The private gift page below has the song, lyrics, and an MP3 download. Send it whenever the moment is right.
      </p>
      <div style={{ marginTop: 22, padding: "20px 16px", background: "linear-gradient(180deg, #08080c 0%, #1a1a20 100%)", borderRadius: 12, border: "1px solid #1a1a20", display: "flex", justifyContent: "center", boxShadow: "inset 0 4px 12px rgba(0,0,0,0.7)" }}>
        <div style={{ transform: "rotate(-1.5deg)" }}>
          <SkeuoCassette w={420} title={deliveryTape.title} meta={deliveryTape.meta} spinning={false} accent={deliveryTape.accent} body={deliveryTape.body} bodyHighlight={deliveryTape.bodyHighlight} bodyShadow={deliveryTape.bodyShadow} labelTone={deliveryTape.labelTone}/>
        </div>
      </div>
      <a href="#" style={{ display: "inline-block", marginTop: 22, padding: "14px 22px", borderRadius: 999, background: "#0E0E0E", color: "#FAF1DF", textDecoration: "none", fontWeight: 600, fontSize: 15 }}>Open gift page →</a>
      <div style={{ marginTop: 18, fontFamily: "var(--f-mono)", fontSize: 12, color: "#888", letterSpacing: "0.04em" }}>
        insidejams.fm/jam/may-may-30
      </div>
      <p style={{ fontSize: 13, color: "#666", marginTop: 22, lineHeight: 1.5 }}>
        Share this link with Maya however you want · text, AirDrop, print the QR. The page is private (unlisted, no search engines).
      </p>
      <EmailFooter/>
    </EmailFrame>
  );
}

function EmailReminder() {
  return (
    <EmailFrame subject="Don't leave Maya hanging · finish your intake">
      <EmailHeader/>
      <span style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.08em", opacity: 0.6 }}>FRIENDLY NUDGE · 24 HRS</span>
      <h1 style={{ fontFamily: "var(--f-display)", fontWeight: 400, fontSize: 36, margin: "12px 0 8px", lineHeight: 1.1, letterSpacing: "-0.01em" }}>Still <em>thinking</em>?</h1>
      <p style={{ fontSize: 15, lineHeight: 1.55, color: "#444" }}>
        You paid yesterday but haven't filled out the intake. No pressure · your link stays good for 30 days. But the sooner you submit, the sooner Maya is laughing at her own personalized song.
      </p>
      <a href="#" style={{ display: "inline-block", marginTop: 22, padding: "14px 22px", borderRadius: 999, background: "#FF5C39", color: "#fff", textDecoration: "none", fontWeight: 600, fontSize: 15 }}>Pick up where you left off →</a>
      <p style={{ fontSize: 13, color: "#888", marginTop: 24, lineHeight: 1.5 }}>
        Stuck? Reply to this email with what you've got and we'll help build the brief.
      </p>
      <EmailFooter/>
    </EmailFrame>
  );
}

function EmailAdminPing() {
  return (
    <EmailFrame subject="🔔 New paid order · IJ-2046 · Quick Jam · Maya" to="founder@insidejams.fm">
      <EmailHeader/>
      <span style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.08em", opacity: 0.6 }}>NEW ORDER</span>
      <h1 style={{ fontFamily: "var(--f-display)", fontWeight: 400, fontSize: 30, margin: "10px 0 8px", lineHeight: 1.1, letterSpacing: "-0.01em" }}>Quick Jam · Maya · $29</h1>
      <div style={{ marginTop: 14, padding: 16, background: "#FAF1DF", borderRadius: 8, fontSize: 14, lineHeight: 1.6 }}>
        <strong>IJ-2046</strong> · jess@gmail.com<br/>
        Roast · Pop anthem · 30th birthday · Medium tone<br/>
        <span style={{ fontFamily: "var(--f-mono)", fontSize: 11, opacity: 0.65 }}>STATUS: paid_intake_pending</span>
      </div>
      <a href="#" style={{ display: "inline-block", marginTop: 22, padding: "12px 18px", borderRadius: 999, background: "#0E0E0E", color: "#FAF1DF", textDecoration: "none", fontWeight: 600, fontSize: 14 }}>Open in admin →</a>
      <EmailFooter/>
    </EmailFrame>
  );
}

function EmailGallery() {
  return (
    <div style={{ minHeight: "100vh", background: "var(--paper)", padding: "60px 40px", color: "var(--ink)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <span className="eyebrow">Transactional emails</span>
        <h1 className="display" style={{ fontSize: 56, margin: "10px 0 8px" }}>Email <em>flow</em></h1>
        <p style={{ fontSize: 16, opacity: 0.7, maxWidth: 540, marginBottom: 40 }}>The five emails that carry buyers from payment to delivery. Plain HTML, sent via Resend.</p>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28 }}>
          <div><span className="chip solid" style={{ marginBottom: 12 }}>1 · INTAKE LINK</span><EmailIntake/></div>
          <div><span className="chip solid" style={{ marginBottom: 12 }}>2 · DELIVERY</span><EmailDelivery/></div>
          <div><span className="chip solid" style={{ marginBottom: 12 }}>3 · 24-HR REMINDER</span><EmailReminder/></div>
          <div><span className="chip solid" style={{ marginBottom: 12 }}>4 · ADMIN PING</span><EmailAdminPing/></div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { EmailGallery, EmailIntake, EmailDelivery, EmailReminder, EmailAdminPing });