/* Why, For-Whom, Author, FAQ, Mobile, CTA, Colophon, Tweaks */

function WhySection() {
  return (
    <section className="section">
      <div className="section-head">
        <div className="section-num">Nº 02 &nbsp;·&nbsp; Was BRIEF. ist</div>
        <div>
          <h2 className="section-title">Ein Newsletter wie ein <em>guter Brief.</em> Nicht wie ein Tech-Blog.</h2>
          <p className="section-sub">
            Drei Prinzipien, seit Ausgabe eins. Wir halten uns daran, auch wenn es uns Leser kostet.
          </p>
        </div>
      </div>

      <div className="why-grid">
        <div className="why-cell">
          <div className="why-num">Prinzip I</div>
          <h3 className="why-title" style={{minHeight: "2.4em"}}>Kein Buzzword bleibt ungeprüft.</h3>
          <p className="why-body">
            „Disruptiv". „Agentic". „Copilot". Wenn wir ein Wort benutzen, erklären wir, was es heißt. Konkret, in einem Satz, mit Beispiel. Sonst fliegt es raus.
          </p>
        </div>
        <div className="why-cell">
          <div className="why-num">Prinzip II</div>
          <h3 className="why-title" style={{minHeight: "2.4em"}}>Jede Woche ein Betrieb, nachbaubar.</h3>
          <p className="why-body">
            Keine branchenfernen Anwendungsfälle, sondern praktikable Beispiele. Hier geht es um echte Betriebe, keine Silicon-Valley-Startups.
          </p>
        </div>
        <div className="why-cell">
          <div className="why-num">Prinzip III</div>
          <h3 className="why-title" style={{minHeight: "2.4em"}}>Acht Minuten. Kein Klick mehr nötig.</h3>
          <p className="why-body">
            Sie lesen den Brief in der Kaffeepause und wissen Bescheid. Keine Links, die Sie durch fünf Seiten schicken. Was wichtig ist, steht in der Email.
          </p>
        </div>
      </div>
    </section>
  );
}

function ForWhomSection() {
  return (
    <section className="section" id="fuer-wen">
      <div className="section-head">
        <div className="section-num">Nº 03 &nbsp;·&nbsp; Für wen</div>
        <div>
          <h2 className="section-title">Wir schreiben für das Handwerk — nicht für die <em>Tech Bubble.</em></h2>
          <p className="section-sub">
            Unser Newsletter adressiert das deutsche Handwerk. Was das bedeutet, sehen Sie im Folgenden:
          </p>
        </div>
      </div>

      <div className="for-matrix">
        <div className="for-col for-yes">
          <div className="for-col-head">
            <div className="for-col-label">Richtig</div>
            <div className="for-col-sub">Für Sie, wenn …</div>
          </div>
          <ul>
            <li><span className="mark">✓</span><span>Sie führen einen Handwerksbetrieb.</span></li>
            <li><span className="mark">✓</span><span>Sie möchten auf den Punkt gebracht erfahren, was in der Welt der KI passiert.</span></li>
            <li><span className="mark">✓</span><span>Sie bevorzugen eine kurze Zusammenfassung anstelle eines detaillierten Essays.</span></li>
          </ul>
        </div>
        <div className="for-col for-no">
          <div className="for-col-head">
            <div className="for-col-label">Falsch</div>
            <div className="for-col-sub">Nicht für Sie, wenn …</div>
          </div>
          <ul>
            <li><span className="mark">×</span><span>Sie wollen zig Tool-Empfehlungen pro Woche, egal für welche Industrie.</span></li>
            <li><span className="mark">×</span><span>Buzzwords wie „disruptiv", „agentic" und „game-changer" sind Wörter, die Ihr Herz höher schlagen lassen.</span></li>
            <li><span className="mark">×</span><span>Sie suchen einen Produktkatalog für Ihre neue KI-Anwendung.</span></li>
          </ul>
        </div>
      </div>
    </section>
  );
}


function FAQSection() {
  const items = [
    {q: "Was kostet BRIEF.?", a: "Nichts. Kein Freemium, kein Upsell, keine Paywall später. Werbung gibt es nicht."},
    {q: "Wie oft erscheint er?", a: "Wöchentlich. Donnerstag um 7 Uhr."},
    {q: "Wie lang ist eine Ausgabe?", a: "Sieben bis neun Minuten Lesezeit. Passt in eine Kaffeepause."},
    {q: "Kann ich abbestellen?", a: "Jederzeit. Ein Klick auf den Link am Ende jeder Ausgabe. Keine Rückfragen, keine Emails mehr."},
    {q: "Was passiert mit meiner Email?", a: "Nichts außer der wöchentlichen Zustellung. Keine Weitergabe, kein Verkauf, kein Tracking-Pixel in der Email."},
    {q: "Brauche ich Vorkenntnisse?", a: "Nein. Wenn Sie einen Betrieb führen, können Sie BRIEF. lesen. Fachjargon erklären wir, sobald wir ihn benutzen."},
  ];
  return (
    <section className="section">
      <div className="section-head">
        <div className="section-num">Nº 05 &nbsp;·&nbsp; Häufige Fragen</div>
        <div>
          <h2 className="section-title">Was Sie <em>wissen sollten,</em> bevor Sie sich anmelden.</h2>
        </div>
      </div>
      <div className="faq-grid">
        {items.map((it, i) => (
          <div key={i} className="faq-item">
            <h3 className="faq-q">{it.q}</h3>
            <p className="faq-a">{it.a}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function MobileView() {
  const [edition, setEdition] = React.useState(null);

  React.useEffect(() => {
    fetch('latest-edition.json')
      .then(r => r.json())
      .then(setEdition)
      .catch(err => console.error('Failed to load edition for mobile:', err));
  }, []);

  const sections = [
    { num: "Nº 01", title: "Die Lage", desc: "Was diese Woche in der KI-Welt passiert, was das für Ihren Betrieb bedeutet, was Sie tun können." },
    { num: "Nº 02", title: "Einer hat's gemacht", desc: "Wir stellen jede Woche einen konkreten Anwendungsfall vor, wie ein Betrieb es geschafft hat, durch den Einsatz von KI effizienter zu werden." },
    { num: "Nº 03", title: "Die Zahl der Woche", desc: "Die Zahl der Woche — eingeordnet im Kontext." },
    { num: "Nº 04", title: "Kurz notiert", desc: "Drei Meldungen, die den Blick lohnen. Nicht mehr, nicht weniger." }
  ];

  // Format short date from date_display, e.g. "Samstag, 18. April 2026" -> "18.04.26"
  const shortDate = (() => {
    if (!edition) return "";
    const monthMap = {januar:"01",februar:"02","märz":"03",april:"04",mai:"05",juni:"06",juli:"07",august:"08",september:"09",oktober:"10",november:"11",dezember:"12"};
    const match = edition.date_display.match(/(\d{1,2})\.\s*([A-Za-zäöüÄÖÜ]+)\s*(\d{4})/);
    if (!match) return edition.date_display;
    const day = match[1].padStart(2, "0");
    const month = monthMap[match[2].toLowerCase()] || "00";
    const year = match[3].slice(2);
    return `${day}.${month}.${year}`;
  })();

  const readMin = edition ? Math.max(1, Math.round(edition.word_count / 200)) : "";

  return (
    <section className="mobile-section">
      <div className="mobile-wrap">
        <div className="mobile-copy">
          <div className="eyebrow">Was in jedem Brief steht</div>
          <h2 className="mobile-h">Vier Sektionen. <em>Acht Minuten.</em></h2>
          <p>
            Jeden Donnerstag bekommen Sie um sieben dieselbe Struktur, damit Sie schnellstmöglich informiert sind.
          </p>

          <div style={{marginTop: 36, borderTop: "1px solid var(--paper-edge)"}}>
            {sections.map((s, i) => (
              <div key={i} style={{
                display: "grid",
                gridTemplateColumns: "72px 1fr",
                gap: "16px",
                padding: "20px 0",
                borderBottom: "1px solid var(--paper-edge)"
              }}>
                <div style={{
                  fontFamily: "var(--mono)",
                  fontSize: 11,
                  letterSpacing: "0.14em",
                  textTransform: "uppercase",
                  color: "var(--accent)",
                  fontWeight: 600,
                  paddingTop: 4
                }}>
                  {s.num}
                </div>
                <div>
                  <div style={{
                    fontFamily: "var(--serif)",
                    fontSize: 19,
                    fontWeight: 500,
                    color: "var(--ink)",
                    marginBottom: 4,
                    lineHeight: 1.3
                  }}>
                    {s.title}
                  </div>
                  <div style={{
                    fontFamily: "var(--serif)",
                    fontSize: 15,
                    color: "var(--ink-2)",
                    lineHeight: 1.55
                  }}>
                    {s.desc}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="mobile-frame">
          <div className="mobile-screen mobile-screen-mail">
            <div className="mobile-notch"></div>
            <div className="mail-chrome">
              <div className="mail-chrome-row">
                <div className="mail-chrome-back">‹ Posteingang</div>
                <div className="mail-chrome-icons">⌵  ⌃</div>
              </div>
            </div>
            <div className="mail-meta">
              <div className="mail-from-row">
                <div className="mail-avatar">B<span className="brief-dot">.</span></div>
                <div className="mail-from-block">
                  <div className="mail-from">BRIEF. <span className="mail-from-addr">&lt;redaktion@getbrief.de&gt;</span></div>
                  <div className="mail-to">an mich &nbsp;·&nbsp; Do., 07:00</div>
                </div>
              </div>
              <div className="mail-subject">
                {edition ? edition.email_subject : "Ausgabe wird geladen…"}
              </div>
            </div>
            <div className="mail-body" style={{position: "relative", maxHeight: 560, overflow: "hidden"}}>
              <div className="mail-mast">
                <div className="brand">BRIEF<span className="brief-dot">.</span></div>
                <div className="mail-mast-meta">
                  {edition ? `Nº ${edition.issue_number} · ${shortDate}` : ""}<br/>
                  {edition ? `${readMin} Min.` : ""}
                </div>
              </div>
              <div className="mail-rule"></div>
              {edition && (
                <>
                  <div className="mail-section-num">{edition.teaser.section_label}</div>
                  <h3 className="mail-section-h">{edition.teaser.headline}</h3>
                  {edition.teaser.paragraphs.map((p, i) => (
                    <p key={i} className="mail-p">
                      {i === 0 ? (
                        <>
                          <span className="mail-dropcap" dangerouslySetInnerHTML={{__html: p.charAt(0)}} />
                          <span dangerouslySetInnerHTML={{__html: p.slice(1)}} />
                        </>
                      ) : (
                        <span dangerouslySetInnerHTML={{__html: p}} />
                      )}
                    </p>
                  ))}
                </>
              )}
              <div style={{
                position: "absolute",
                bottom: 0,
                left: 0,
                right: 0,
                height: 200,
                background: "linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 55%, rgba(255,255,255,1) 100%)",
                backdropFilter: "blur(1.5px)",
                WebkitBackdropFilter: "blur(1.5px)",
                pointerEvents: "none"
              }}></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CTASection() {
  const [modalOpen, setModalOpen] = useState(false);
  return (
    <section className="cta">
      <div className="cta-mark">BRIEF<span className="brief-dot">.</span></div>
      <div className="eyebrow" style={{marginBottom: 20}}>Donnerstag, 7 Uhr</div>
      <h2 className="cta-h">Bis dahin. <em>Ihr Brief.</em></h2>
      <p className="cta-sub">
        Lassen Sie sich briefen.
      </p>
      <button
        className="btn btn-cta cta-button"
        onClick={() => setModalOpen(true)}
      >
        Kostenlos abonnieren
      </button>
      <SubscribeModal isOpen={modalOpen} onClose={() => setModalOpen(false)} />
    </section>
  );
}

function Colophon() {
  return (
    <footer className="colophon page">
      <div className="colophon-grid">
        <div>
          <Wordmark size="md" />
          <p className="colophon-about" style={{marginTop: 16}}>
            BRIEF. berichtet wöchentlich per Email über Künstliche Intelligenz im deutschen Mittelstand und Handwerk. Aus Berlin.
          </p>
        </div>

        <div>
          <h4>Rechtliches</h4>
          <ul>
            <li><a href="/impressum.html">Impressum</a></li>
            <li><a href="/datenschutz.html">Datenschutz</a></li>
          </ul>
        </div>
      </div>
      <div className="colophon-bottom">
        <div>© 2026 BRIEF. Verlag · Berlin</div>
      </div>
    </footer>
  );
}

function TweaksPanel({ state, setState, visible, setVisible }) {
  if (!visible) return null;

  const set = (key, value) => {
    const next = { ...state, [key]: value };
    setState(next);
    try {
      window.parent.postMessage({
        type: '__edit_mode_set_keys',
        edits: { [key]: value }
      }, '*');
    } catch(e) {}
  };

  return (
    <div className="tweaks">
      <div className="tweaks-h">
        <span>Tweaks</span>
        <button onClick={() => setVisible(false)} aria-label="Schließen">×</button>
      </div>

      <div className="tweaks-group">
        <label className="tweaks-label">Farbwelt</label>
        <div className="tweaks-row">
          <button className={`tweaks-opt ${state.palette === "tinte" ? "active" : ""}`} onClick={() => set("palette", "tinte")}>Tinte</button>
          <button className={`tweaks-opt ${state.palette === "postrot" ? "active" : ""}`} onClick={() => set("palette", "postrot")}>Postrot</button>
          <button className={`tweaks-opt ${state.palette === "mono" ? "active" : ""}`} onClick={() => set("palette", "mono")}>Mono</button>
        </div>
      </div>

      <div className="tweaks-group">
        <label className="tweaks-label">Wortmarke-Präfix</label>
        <div className="tweaks-row two">
          <button className={`tweaks-opt ${state.prefix === "off" ? "active" : ""}`} onClick={() => set("prefix", "off")}>BRIEF.</button>
          <button className={`tweaks-opt ${state.prefix === "on" ? "active" : ""}`} onClick={() => set("prefix", "on")}>Der · BRIEF.</button>
        </div>
      </div>

      <div className="tweaks-group">
        <label className="tweaks-label">Hero-Headline</label>
        <div className="tweaks-row" style={{gridTemplateColumns: "1fr"}}>
          <button className={`tweaks-opt ${state.headline === "direkt" ? "active" : ""}`} onClick={() => set("headline", "direkt")} style={{textAlign:"left"}}>Was KI für Ihren Betrieb bedeutet</button>
          <button className={`tweaks-opt ${state.headline === "nuechtern" ? "active" : ""}`} onClick={() => set("headline", "nuechtern")} style={{textAlign:"left"}}>Der KI-Brief für das Handwerk</button>
          <button className={`tweaks-opt ${state.headline === "knapp" ? "active" : ""}`} onClick={() => set("headline", "knapp")} style={{textAlign:"left"}}>Donnerstags. Acht Minuten. Kostenlos.</button>
        </div>
      </div>

      <div className="tweaks-group">
        <label className="tweaks-label">Typografie</label>
        <div className="tweaks-row two">
          <button className={`tweaks-opt ${state.type === "serif" ? "active" : ""}`} onClick={() => set("type", "serif")}>Serif (Editorial)</button>
          <button className={`tweaks-opt ${state.type === "grotesk" ? "active" : ""}`} onClick={() => set("type", "grotesk")}>Grotesk</button>
        </div>
      </div>

      <div className="tweaks-group" style={{paddingTop: 12, borderTop: "1px solid var(--paper-edge)"}}>
        <a href="ci.html" style={{fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--ink)", textDecoration: "underline", textUnderlineOffset: 3}}>
          → Style Guide ansehen
        </a>
      </div>
    </div>
  );
}

window.WhySection = WhySection;
window.ForWhomSection = ForWhomSection;
window.FAQSection = FAQSection;
window.MobileView = MobileView;
window.CTASection = CTASection;
window.Colophon = Colophon;
window.TweaksPanel = TweaksPanel;