/* About page direction — matches manifesto.jsx language.
   Editorial broadside on dark stage with Bergen accents.
   Semantic HTML throughout (article, section, h1/h2/h3, dl/dt/dd) so
   search engines and LLMs can extract clearly.
*/

const { useState: useStateAbout, useEffect: useEffectAbout } = React;

function AboutDirection({ lang, setLang, accent, palette, revealAll, noFooter }) {
  const cart = useCart();
  const drop = window.DROP_DATA.drop;
  const cd = useCountdown(drop.iso);
  const seo = window.AWOTOWA_SEO;
  const paper = "#efe7d6";

  const f = { stack: "'Newsreader', 'Times New Roman', serif", body: 500, display: 600 };

  return (
    <div style={{
      background: "#222222", color: "#ece5d8", minHeight: "100vh",
      fontFamily: "var(--mf-serif)",
      fontWeight: "var(--mf-body-weight, 500)",
      ["--mf-serif"]: f.stack,
      ["--mf-body-weight"]: f.body,
      ["--mf-display-weight"]: f.display,
    }}>
      <MfNav lang={lang} setLang={setLang} accent={accent} cart={cart} cd={cd} revealAll={revealAll} />

      <AboutHero lang={lang} accent={accent} seo={seo} palette={palette} />
      <MfBergenStrip palette={palette} />
      <AboutPillars lang={lang} accent={accent} seo={seo} />
      <AboutFounders lang={lang} accent={accent} seo={seo} paper={paper} />
      <AboutTimeline lang={lang} accent={accent} seo={seo} />
      <AboutPress lang={lang} accent={accent} seo={seo} />
      <AboutContact lang={lang} accent={accent} seo={seo} />
      {!noFooter && <MfFooter lang={lang} accent={accent} drop={drop} />}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────
// HERO — editorial. h1 includes "Bergen" + "clothing label" keywords.
// ─────────────────────────────────────────────────────────────────
function AboutHero({ lang, accent, seo, palette }) {
  const h = seo.about.hero;
  return (
    <section id="top" style={{
      padding: "24px 4vw 80px",
      borderBottom: "1px solid rgba(236,229,216,0.08)",
    }}>
      <div style={{ maxWidth: 1400, display: "flex", flexDirection: "column", gap: 56 }}>
        <div>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.34em",
            color: "rgba(236,229,216,0.55)", textTransform: "uppercase", marginBottom: 24,
          }}>
            {h.kicker[lang]} · BGO · {lang === "no" ? "Først utgitt" : "First published"} 05.2026
          </div>

          <h1 style={{
            margin: 0,
            fontFamily: "var(--mf-serif)", fontWeight: "var(--mf-display-weight, 700)",
            fontSize: "clamp(40px, 6.6vw, 110px)", lineHeight: 0.98, letterSpacing: "-0.03em",
            color: "#ece5d8",
            whiteSpace: "pre-line",
          }}>
            {h.headline[lang].split("\n").map((line, i) => (
              <div key={i} style={i === 1 ? { fontStyle: "italic" } : undefined}>{line}</div>
            ))}
          </h1>
        </div>

        {/* The AI-extractable summary. Plain prose, no redactions. */}
        <div style={{
          display: "grid", gridTemplateColumns: "minmax(0, 720px) 1fr", gap: 64,
          alignItems: "start",
        }}>
          <p style={{
            margin: 0, fontFamily: "var(--mf-serif)", fontStyle: "normal",
            fontWeight: "var(--mf-body-weight, 500)", fontSize: 24, lineHeight: 1.55,
            color: "rgba(236,229,216,0.95)",
          }}>
            {h.summary[lang]}
          </p>

          <aside style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.18em",
            color: "rgba(236,229,216,0.6)", textTransform: "uppercase",
            display: "flex", flexDirection: "column", gap: 10,
            borderLeft: `2px solid ${accent}`, paddingLeft: 18,
          }}>
            <div><span style={{ color: "rgba(236,229,216,0.4)" }}>{lang === "no" ? "Type" : "Type"}</span> · {lang === "no" ? "Klesmerke / Byaktivitet" : "Clothing label / Urban activity"}</div>
            <div><span style={{ color: "rgba(236,229,216,0.4)" }}>{lang === "no" ? "By" : "City"}</span> · Bergen, Norway</div>
            <div><span style={{ color: "rgba(236,229,216,0.4)" }}>{lang === "no" ? "Grunnlagt" : "Founded"}</span> · 2026</div>
            <div><span style={{ color: "rgba(236,229,216,0.4)" }}>{lang === "no" ? "Modell" : "Model"}</span> · {lang === "no" ? "Fast lager, ingen påfylling" : "Fixed inventory, no restock"}</div>
            <div><span style={{ color: "rgba(236,229,216,0.4)" }}>{lang === "no" ? "Kontakt" : "Contact"}</span> · <a href="mailto:info@awotowa.com" style={{ color: accent, textDecoration: "none" }}>info@awotowa.com</a></div>
          </aside>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// PILLARS — four principles. h2 per card.
// ─────────────────────────────────────────────────────────────────
function AboutPillars({ lang, accent, seo }) {
  const pillars = seo.about.pillars;
  return (
    <section id="principles" style={{ padding: "120px 4vw", maxWidth: 1400, margin: "0 auto" }}>
      <div style={{
        display: "flex", justifyContent: "space-between", alignItems: "baseline",
        paddingBottom: 22, borderBottom: "1px solid rgba(236,229,216,0.18)",
        marginBottom: 64, gap: 32, flexWrap: "wrap",
      }}>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.34em",
          color: "rgba(236,229,216,0.55)", textTransform: "uppercase",
        }}>{lang === "no" ? "Prinsipper" : "Principles"} · 04</div>
        <h2 style={{
          margin: 0, fontFamily: "var(--mf-serif)", fontStyle: "italic",
          fontWeight: "var(--mf-display-weight, 700)",
          fontSize: "clamp(40px, 6vw, 90px)", lineHeight: 0.95, letterSpacing: "-0.02em",
          color: "#ece5d8",
        }}>
          {lang === "no" ? "Slik jobber vi." : "How we work."}
        </h2>
        <div style={{ width: 1 }} />
      </div>

      <div className="ab-pillars-grid">
        {pillars.map((p, i) => (
          <article key={i} style={{
            paddingTop: 32,
            borderTop: `1px solid ${i === 0 ? accent : "rgba(236,229,216,0.18)"}`,
          }}>
            <div style={{
              fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.3em",
              color: accent, textTransform: "uppercase", marginBottom: 16,
            }}>0{i + 1}</div>
            <h3 style={{
              margin: "0 0 18px",
              fontFamily: "var(--mf-serif)", fontStyle: "italic",
              fontWeight: "var(--mf-display-weight, 700)",
              fontSize: 36, lineHeight: 1.05, letterSpacing: "-0.01em",
              color: "#ece5d8",
            }}>{p.title[lang]}</h3>
            <p style={{
              margin: 0,
              fontFamily: "var(--mf-serif)", fontWeight: "var(--mf-body-weight, 500)",
              fontSize: 17, lineHeight: 1.55,
              color: "rgba(236,229,216,0.78)",
            }}>{p.body[lang]}</p>
          </article>
        ))}
      </div>

      <style>{`
        .ab-pillars-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 48px;
        }
        @media (max-width: 1100px) {
          .ab-pillars-grid { grid-template-columns: repeat(2, 1fr); gap: 56px; }
        }
        @media (max-width: 600px) {
          .ab-pillars-grid { grid-template-columns: 1fr; gap: 48px; }
        }
      `}</style>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// FOUNDERS — on warm paper, like the manifesto letter.
// ─────────────────────────────────────────────────────────────────
function AboutFounders({ lang, accent, seo, paper }) {
  return (
    <section id="founders" style={{
      padding: "140px 48px", background: paper, color: "#1a1410",
    }}>
      <div style={{ maxWidth: 1080, margin: "0 auto" }}>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "baseline",
          paddingBottom: 22, borderBottom: "1px solid rgba(26,20,16,0.22)",
          fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.32em",
          color: "rgba(26,20,16,0.55)", textTransform: "uppercase",
        }}>
          <span>{lang === "no" ? "Teamet" : "The team"} · 02</span>
          <span>{lang === "no" ? "Privat studio" : "Private studio"} / BGO</span>
        </div>

        <h2 style={{
          margin: "56px 0 12px",
          fontFamily: "var(--mf-serif)", fontWeight: "var(--mf-display-weight, 700)", fontStyle: "italic",
          fontSize: "clamp(36px, 5vw, 72px)", lineHeight: 1.05, letterSpacing: "-0.015em",
          color: "#1a1410",
        }}>
          {lang === "no" ? "To personer. Begge fra Bergen." : "Two people. Both from Bergen."}
        </h2>

        <p style={{
          margin: "0 0 80px",
          fontFamily: "var(--mf-serif)", fontWeight: "var(--mf-body-weight, 500)",
          fontStyle: "italic",
          fontSize: 20, lineHeight: 1.5,
          color: "rgba(26,20,16,0.75)",
        }}>
          {lang === "no"
            ? "Vi bruker bare fornavn med vilje. Det er ingen mysterium — vi vil bare ikke at mødrene våre skal ringe om nettsiden."
            : "We use first names only on purpose. There is no mystery — we just don't want our mothers calling about the website."}
        </p>

        <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 64 }}>
          {seo.founders.map((f, i) => (
            <article key={i} style={{
              display: "grid",
              gridTemplateColumns: "180px 1fr",
              gap: 40,
              alignItems: "start",
            }} className="ab-founder-row">
              {/* portrait placeholder */}
              <div style={{
                aspectRatio: "1 / 1.2",
                background: "#1a1410",
                position: "relative",
                overflow: "hidden",
              }}>
                <div style={{
                  position: "absolute", inset: 0,
                  backgroundImage: "repeating-linear-gradient(180deg, rgba(236,229,216,0.05) 0 1px, transparent 1px 6px)",
                }} />
                <div style={{
                  position: "absolute", top: 10, left: 12,
                  fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.16em",
                  color: "rgba(236,229,216,0.55)", textTransform: "uppercase",
                }}>PORTRAIT</div>
                <div style={{
                  position: "absolute", bottom: 10, left: 12, right: 12,
                  fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.16em",
                  color: "rgba(236,229,216,0.4)", textTransform: "uppercase",
                  display: "flex", justifyContent: "space-between",
                }}>
                  <span>[ {lang === "no" ? "ikke fotografert" : "not photographed"} ]</span>
                  <span>—</span>
                </div>
              </div>

              <div>
                <h3 style={{
                  margin: 0,
                  fontFamily: "var(--mf-serif)", fontStyle: "italic", fontWeight: "var(--mf-display-weight, 700)",
                  fontSize: 48, lineHeight: 1, color: "#1a1410",
                }}>{f.name}</h3>
                <div style={{
                  margin: "10px 0 22px",
                  fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.26em",
                  color: accent, textTransform: "uppercase",
                }}>{f.role[lang]}</div>
                <p style={{
                  margin: 0,
                  fontFamily: "var(--mf-serif)", fontWeight: "var(--mf-body-weight, 500)",
                  fontSize: 19, lineHeight: 1.55, color: "rgba(26,20,16,0.85)",
                  maxWidth: 540,
                }}>{f.bio[lang]}</p>
              </div>
            </article>
          ))}
        </div>

        <style>{`
          @media (max-width: 700px) {
            .ab-founder-row { grid-template-columns: 1fr !important; gap: 24px !important; }
            .ab-founder-row > div:first-child { max-width: 220px; }
          }
        `}</style>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// TIMELINE — vertical, dl/dt/dd for semantics.
// ─────────────────────────────────────────────────────────────────
function AboutTimeline({ lang, accent, seo }) {
  return (
    <section id="timeline" style={{ padding: "140px 4vw", maxWidth: 1100, margin: "0 auto" }}>
      <div style={{
        display: "flex", justifyContent: "space-between", alignItems: "baseline",
        paddingBottom: 22, borderBottom: "1px solid rgba(236,229,216,0.18)",
        marginBottom: 56, gap: 32, flexWrap: "wrap",
      }}>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.34em",
          color: "rgba(236,229,216,0.55)", textTransform: "uppercase",
        }}>{lang === "no" ? "Tidslinje" : "Timeline"}</div>
        <h2 style={{
          margin: 0, fontFamily: "var(--mf-serif)", fontStyle: "italic",
          fontWeight: "var(--mf-display-weight, 700)",
          fontSize: "clamp(36px, 5.6vw, 78px)", lineHeight: 0.98, letterSpacing: "-0.02em",
          color: "#ece5d8",
        }}>
          {lang === "no" ? "Hvor vi har vært, hvor vi skal." : "Where we've been, where we go."}
        </h2>
        <div style={{ width: 1 }} />
      </div>

      <dl style={{ margin: 0, padding: 0 }}>
        {seo.timeline.map((t, i) => (
          <div key={i} style={{
            display: "grid",
            gridTemplateColumns: "180px 1fr",
            gap: 32,
            alignItems: "baseline",
            padding: "28px 0",
            borderBottom: i < seo.timeline.length - 1 ? "1px solid rgba(236,229,216,0.1)" : "none",
          }}>
            <dt style={{
              fontFamily: "'JetBrains Mono', monospace", fontSize: 12, letterSpacing: "0.28em",
              color: accent, textTransform: "uppercase",
            }}>{t.date}</dt>
            <dd style={{
              margin: 0,
              fontFamily: "var(--mf-serif)", fontStyle: "italic",
              fontWeight: "var(--mf-body-weight, 500)",
              fontSize: "clamp(22px, 2.4vw, 32px)", lineHeight: 1.25,
              color: "rgba(236,229,216,0.9)",
            }}>{t[lang]}</dd>
          </div>
        ))}
      </dl>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// PRESS — placeholders, marked.
// ─────────────────────────────────────────────────────────────────
function AboutPress({ lang, accent, seo }) {
  return (
    <section id="press" style={{
      padding: "120px 4vw",
      borderTop: "1px solid rgba(236,229,216,0.1)",
      borderBottom: "1px solid rgba(236,229,216,0.1)",
    }}>
      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.34em",
          color: "rgba(236,229,216,0.55)", textTransform: "uppercase",
          marginBottom: 8,
        }}>
          {lang === "no" ? "Presse" : "Press"} · <span style={{ color: accent }}>[{lang === "no" ? "PLASSHOLDERE" : "PLACEHOLDERS"}]</span>
        </div>
        <h2 style={{
          margin: "0 0 56px",
          fontFamily: "var(--mf-serif)", fontStyle: "italic",
          fontWeight: "var(--mf-display-weight, 700)",
          fontSize: "clamp(32px, 4.6vw, 60px)", lineHeight: 1, letterSpacing: "-0.015em",
          color: "rgba(236,229,216,0.85)",
        }}>
          {lang === "no" ? "Hva andre vil ha sagt." : "What others will have said."}
        </h2>

        <div className="ab-press-grid">
          {seo.press.map((p, i) => (
            <figure key={i} style={{ margin: 0 }}>
              <blockquote style={{
                margin: 0,
                fontFamily: "var(--mf-serif)", fontStyle: "italic",
                fontWeight: "var(--mf-body-weight, 500)",
                fontSize: 24, lineHeight: 1.4, color: "rgba(236,229,216,0.9)",
              }}>{p[lang]}</blockquote>
              <figcaption style={{
                marginTop: 22, paddingTop: 14,
                borderTop: `1px solid ${accent}`,
                fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.28em",
                color: "rgba(236,229,216,0.6)", textTransform: "uppercase",
                display: "flex", justifyContent: "space-between",
              }}>
                <span>{p.outlet}</span>
                <span style={{ color: "rgba(236,229,216,0.35)" }}>[{lang === "no" ? "plassholder" : "placeholder"}]</span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>

      <style>{`
        .ab-press-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 56px;
        }
        @media (max-width: 900px) { .ab-press-grid { grid-template-columns: 1fr; gap: 48px; } }
      `}</style>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// CONTACT — short, useful.
// ─────────────────────────────────────────────────────────────────
function AboutContact({ lang, accent, seo }) {
  return (
    <section id="contact" style={{ padding: "140px 4vw", maxWidth: 1200, margin: "0 auto" }}>
      <div style={{
        fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.34em",
        color: "rgba(236,229,216,0.55)", textTransform: "uppercase",
        marginBottom: 18,
      }}>
        {lang === "no" ? "Kontakt" : "Contact"}
      </div>

      <h2 style={{
        margin: "0 0 40px",
        fontFamily: "var(--mf-serif)", fontStyle: "italic",
        fontWeight: "var(--mf-display-weight, 700)",
        fontSize: "clamp(40px, 6vw, 90px)", lineHeight: 0.98, letterSpacing: "-0.02em",
        color: "#ece5d8",
      }}>
        <a href="mailto:info@awotowa.com" data-interactive="true" style={{
          color: "#ece5d8", textDecoration: "none",
          backgroundImage: `linear-gradient(${accent}, ${accent})`,
          backgroundSize: "100% 4px", backgroundPosition: "0 100%", backgroundRepeat: "no-repeat",
          paddingBottom: 4,
        }}>info@awotowa.com</a>
      </h2>

      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
        gap: 48,
        fontFamily: "var(--mf-serif)", fontSize: 17, lineHeight: 1.55,
        color: "rgba(236,229,216,0.78)",
        maxWidth: 1100,
      }}>
        <div>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.28em",
            color: accent, textTransform: "uppercase", marginBottom: 10,
          }}>{lang === "no" ? "Generelt" : "General"}</div>
          <p style={{ margin: 0 }}>
            {lang === "no"
              ? "Spørsmål, presse, plagg, plakatklager — alt går til info@awotowa.com. Vi svarer innen 2–3 virkedager."
              : "Questions, press, garments, complaints about a poster — all to info@awotowa.com. We reply within 2–3 working days."}
          </p>
        </div>
        <div>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.28em",
            color: accent, textTransform: "uppercase", marginBottom: 10,
          }}>{lang === "no" ? "Samarbeid" : "Collaborations"}</div>
          <p style={{ margin: 0 }}>
            {lang === "no"
              ? "Send oss ett avsnitt. Ikke et deck. Hvis vi er interessert, ber vi om mer."
              : "Send us one paragraph. Not a deck. If we are interested, we will ask for more."}
          </p>
        </div>
        <div>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.28em",
            color: accent, textTransform: "uppercase", marginBottom: 10,
          }}>{lang === "no" ? "Sted" : "Location"}</div>
          <p style={{ margin: 0 }}>
            Bergen, Norway<br />
            60°23′N · 5°19′E<br />
            <span style={{ color: "rgba(236,229,216,0.5)" }}>
              {lang === "no" ? "(privat studio — ingen besøk)" : "(private studio — no walk-ins)"}
            </span>
          </p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { AboutDirection });