/* Current Ecosystem, Long-term Direction, Investor, Closing, Footer */

const CurrentEcosystem = () => {
  const projects = [
    { name: "OOTW Spirit Guide", status: "ACTIVE", kind: "AI Platform", color: "var(--magenta)" },
    { name: "OOTW Chocolate & Cacao", status: "SHIPPING", kind: "Consumable", color: "var(--gold)" },
    { name: "OOTW Ritual", status: "ACTIVE", kind: "Product Line", color: "var(--gold)" },
    { name: "OOTW Journal", status: "PUBLISHING", kind: "Media", color: "var(--teal)" },
    { name: "OOTW Oracle", status: "ACTIVE", kind: "Platform", color: "var(--teal)" },
    { name: "Veteran Support Platform", status: "DEVELOPMENT", kind: "Mission Software", color: "var(--magenta)" },
    { name: "SaaS Platforms — Healing & Integration", status: "DEVELOPMENT", kind: "B2B Infrastructure", color: "var(--gold)" },
    { name: "Clinical & Biotech Partnerships", status: "ENGAGED", kind: "Research", color: "var(--magenta)" },
  ];
  return (
    <section className="section-pad">
      <div className="container">
        <SectionLabel num="§ 06" title="CURRENT ECOSYSTEM" color="var(--gold)" />

        <div style={{ marginBottom: 64, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40 }} className="grid-2">
          <p className="display" style={{
            fontSize: "clamp(28px, 3.4vw, 48px)",
            lineHeight: 1.1,
            letterSpacing: "-0.02em",
          }}>
            Active & developing projects.
          </p>
          <p style={{ fontSize: 16, lineHeight: 1.55, color: "var(--paper-dim)", maxWidth: 540 }}>
            Each component stands on its own and is designed to operate independently — and more powerfully as part of a unified system.
          </p>
        </div>

        <div style={{ border: "1px solid var(--hairline)" }}>
          <div style={{
            display: "grid",
            gridTemplateColumns: "60px 1fr 200px 160px 60px",
            padding: "16px 24px",
            borderBottom: "1px solid var(--hairline)",
            background: "rgba(244, 239, 230, 0.02)",
          }} className="ecosys-header">
            <span className="mono-coord">IDX</span>
            <span className="mono-coord">PROJECT</span>
            <span className="mono-coord">CATEGORY</span>
            <span className="mono-coord">STATUS</span>
            <span className="mono-coord" style={{ textAlign: "right" }}>—</span>
          </div>
          {projects.map((p, i) => (
            <div key={p.name} data-cursor="hover" className="ecosys-row" style={{
              display: "grid",
              gridTemplateColumns: "60px 1fr 200px 160px 60px",
              padding: "24px 24px",
              borderBottom: i < projects.length - 1 ? "1px solid var(--hairline)" : "none",
              alignItems: "center",
              transition: "background 240ms",
              cursor: "none",
            }}
            onMouseEnter={(e) => e.currentTarget.style.background = "rgba(244, 239, 230, 0.03)"}
            onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
            >
              <span className="mono-coord">P.{String(i + 1).padStart(2, "0")}</span>
              <p className="display" style={{
                fontSize: "clamp(18px, 2.2vw, 28px)",
                fontWeight: 300,
                letterSpacing: "-0.015em",
              }}>{p.name}</p>
              <span className="mono-label" style={{ color: "var(--muted)" }}>{p.kind}</span>
              <span style={{
                fontFamily: "var(--font-mono)",
                fontSize: 10,
                letterSpacing: "0.16em",
                color: p.color,
                display: "flex",
                alignItems: "center",
                gap: 8,
              }}>
                <span style={{ width: 6, height: 6, borderRadius: 999, background: p.color, boxShadow: `0 0 8px ${p.color}` }} />
                {p.status}
              </span>
              <span style={{ textAlign: "right", color: "var(--muted)" }}>→</span>
            </div>
          ))}
        </div>

        <style>{`
          @media (max-width: 900px) {
            .ecosys-header, .ecosys-row { grid-template-columns: 40px 1fr 80px !important; }
            .ecosys-header > *:nth-child(3),
            .ecosys-header > *:nth-child(5),
            .ecosys-row > *:nth-child(3),
            .ecosys-row > *:nth-child(5) { display: none !important; }
          }
        `}</style>
      </div>
    </section>
  );
};

const LongTerm = () => {
  const channels = [
    { label: "Artificial Intelligence", code: "AI" },
    { label: "B2B products", code: "B2B" },
    { label: "Enterprise products", code: "ENT" },
    { label: "Government products", code: "GOV" },
    { label: "Consumer products", code: "DTC" },
    { label: "Digital platforms", code: "DGT" },
    { label: "Clinical pathways", code: "CLN" },
    { label: "Community experiences", code: "CMM" },
    { label: "Institutional partnerships", code: "INS" },
  ];
  return (
    <section className="section-pad" style={{ position: "relative" }}>
      <div className="container">
        <SectionLabel num="§ 07" title="LONG-TERM DIRECTION" color="var(--magenta)" />

        <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 80 }} className="grid-2">
          <div>
            <p className="display" style={{
              fontSize: "clamp(40px, 5.5vw, 88px)",
              lineHeight: 1,
              letterSpacing: "-0.04em",
              marginBottom: 32,
            }}>
              A fully <span className="display-italic" style={{ color: "var(--magenta)" }}>integrated</span> ecosystem.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--paper-dim)", maxWidth: 540, marginBottom: 32 }}>
              Our objective is to become the leading platform for <em style={{ color: "var(--paper)" }}>human development</em> in the modern era.
            </p>
            <div style={{ display: "flex", alignItems: "center", gap: 20 }}>
              <Mark size={64} tone="B" spinning={true} />
              <div>
                <p className="mono-label" style={{ color: "var(--gold)" }}>GENERATIONAL HORIZON</p>
                <p className="display-italic" style={{ fontSize: 24, color: "var(--paper)" }}>2025 → ∞</p>
              </div>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, border: "1px solid var(--hairline)" }}>
            {channels.map((c, i) => (
              <div key={c.code} data-cursor="hover" className="lt-cell" style={{
                padding: "20px 18px",
                borderRight: i % 2 === 0 ? "1px solid var(--hairline)" : "none",
                borderBottom: i < channels.length - 2 ? "1px solid var(--hairline)" : "none",
                position: "relative",
                overflow: "hidden",
                transition: "background 280ms",
              }}>
                <div style={{ display: "flex", alignItems: "baseline", gap: 12, marginBottom: 8 }}>
                  <span className="mono-coord" style={{ color: "var(--magenta)" }}>{c.code}</span>
                  <span className="mono-coord">/{String(i + 1).padStart(2, "0")}</span>
                </div>
                <p className="display" style={{
                  fontSize: 18,
                  fontWeight: 300,
                  letterSpacing: "-0.01em",
                  lineHeight: 1.2,
                }}>{c.label}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const Investor = () => {
  return (
    <section id="investor" className="section-pad" style={{
      borderTop: "1px solid var(--hairline-strong)",
      borderBottom: "1px solid var(--hairline-strong)",
      background: "linear-gradient(180deg, rgba(7, 6, 11, 0) 0%, rgba(20, 18, 42, 0.5) 50%, rgba(7, 6, 11, 0) 100%)",
      position: "relative",
    }}>
      {/* big watermark */}
      <div style={{
        position: "absolute",
        top: "50%", left: "50%",
        transform: "translate(-50%, -50%)",
        pointerEvents: "none",
        opacity: 0.04,
        fontSize: "min(40vw, 600px)",
        fontFamily: "var(--font-display)",
        fontStyle: "italic",
        fontWeight: 200,
        letterSpacing: "-0.05em",
        color: "var(--gold)",
        whiteSpace: "nowrap",
      }}>
        Capital
      </div>

      <div className="container" style={{ position: "relative", zIndex: 1 }}>
        <SectionLabel num="§ 08" title="INVESTOR" color="var(--gold)" />

        <div style={{ marginBottom: 64, maxWidth: 1100 }}>
          <p className="mono-label" style={{ color: "var(--gold)", marginBottom: 24 }}>FOR ALIGNED CAPITAL</p>
          <p className="display" style={{
            fontSize: "clamp(40px, 6vw, 96px)",
            lineHeight: 0.98,
            letterSpacing: "-0.04em",
          }}>
            A new <span className="display-italic" style={{ color: "var(--magenta)" }}>category</span>. <br/>
            A scalable <span className="display-italic" style={{ color: "var(--teal)" }}>system</span>. <br/>
            A global <span className="display-italic" style={{ color: "var(--gold)" }}>opportunity</span>.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 80, marginBottom: 80 }} className="grid-2">
          <div>
            <p className="mono-label" style={{ marginBottom: 24 }}>CONVERGENCE OF</p>
            <div style={{ display: "flex", flexDirection: "column" }}>
              {[
                { label: "Wellness", note: "$5T+ global market", color: "var(--magenta)" },
                { label: "Mental health", note: "Accelerating demand", color: "var(--teal)" },
                { label: "AI-driven products & personalization", note: "Generational shift", color: "var(--gold)" },
                { label: "Functional consumer, business, gov, enterprise", note: "Cross-segment", color: "var(--magenta)" },
                { label: "Emerging therapeutic frameworks", note: "Regulatory tailwinds", color: "var(--teal)" },
              ].map((m, i) => (
                <div key={m.label} style={{
                  padding: "20px 0",
                  borderTop: "1px solid var(--hairline)",
                  borderBottom: i === 4 ? "1px solid var(--hairline)" : "none",
                  display: "grid",
                  gridTemplateColumns: "1fr auto",
                  gap: 24,
                  alignItems: "center",
                }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                    <span style={{ width: 6, height: 6, borderRadius: 999, background: m.color }} />
                    <p className="display" style={{ fontSize: "clamp(20px, 2.2vw, 28px)", fontWeight: 300 }}>{m.label}</p>
                  </div>
                  <span className="mono-coord" style={{ color: m.color }}>{m.note}</span>
                </div>
              ))}
            </div>
            <p style={{ fontSize: 16, lineHeight: 1.55, color: "var(--paper-dim)", marginTop: 32, maxWidth: 540 }}>
              We are building a <em style={{ color: "var(--gold)" }}>vertically integrated ecosystem</em> positioned to lead this convergence.
            </p>
          </div>

          <div>
            <div style={{
              border: "1px solid var(--gold)",
              padding: 36,
              background: "rgba(217, 180, 91, 0.04)",
            }}>
              <p className="mono-label" style={{ color: "var(--gold)", marginBottom: 28 }}>CURRENTLY ENGAGING WITH</p>
              <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 16, marginBottom: 36 }}>
                {[
                  "Strategic investors",
                  "Private equity groups",
                  "Institutional partners",
                  "Aligned long-term capital",
                ].map((p, i) => (
                  <li key={p} style={{ display: "flex", alignItems: "center", gap: 16 }}>
                    <span className="mono-coord" style={{ color: "var(--gold)" }}>{String(i + 1).padStart(2, "0")}</span>
                    <span className="display" style={{ fontSize: 22, fontWeight: 300, fontStyle: "italic" }}>{p}</span>
                  </li>
                ))}
              </ul>

              <div style={{ height: 1, background: "var(--hairline-strong)", marginBottom: 28 }} />

              <p style={{ fontSize: 14, color: "var(--paper-dim)", marginBottom: 24, lineHeight: 1.55 }}>
                To request access to our investor materials:
              </p>
              <a href="#" data-cursor="hover" className="btn btn-gold" style={{ width: "100%", justifyContent: "space-between" }}>
                <span>Submit Inquiry</span>
                <span className="btn-arrow">→</span>
              </a>
              <p style={{ fontSize: 13, color: "var(--muted)", marginTop: 20, fontFamily: "var(--font-mono)", letterSpacing: "0.04em" }}>
                or contact <a href="mailto:relations@ootw.co" data-cursor="hover" style={{ color: "var(--gold)", textDecoration: "none", borderBottom: "1px solid var(--gold)" }}>relations@ootw.co</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const Closing = () => {
  return (
    <section className="section-pad" style={{ paddingBottom: 60 }}>
      <div className="container">
        <SectionLabel num="§ 09" title="CLOSING" color="var(--paper)" />

        <div style={{ maxWidth: 1100 }}>
          <p className="display" style={{
            fontSize: "clamp(36px, 5vw, 72px)",
            lineHeight: 1.05,
            letterSpacing: "-0.03em",
            marginBottom: 48,
          }}>
            Out Of This World is built to <span className="display-italic" style={{ color: "var(--magenta)" }}>expand</span> the current structure of the world.
          </p>
          <p style={{ fontSize: 22, lineHeight: 1.45, color: "var(--paper-dim)", maxWidth: 880, marginBottom: 64 }}>
            We are creating systems that support individuals in stepping into greater clarity, awareness, and alignment — while grounding those experiences into <em style={{ color: "var(--paper)" }}>tangible, scalable reality</em>.
          </p>
          <div style={{ display: "flex", alignItems: "center", gap: 20 }}>
            <div style={{ width: 40, height: 1, background: "var(--magenta)" }} />
            <p className="display-italic" style={{ fontSize: 28, color: "var(--paper)" }}>
              The work is already in motion.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

const Footer = () => {
  return (
    <footer style={{
      borderTop: "1px solid var(--hairline-strong)",
      paddingTop: 80,
      paddingBottom: 40,
      position: "relative",
      zIndex: 1,
    }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 48, marginBottom: 80 }} className="footer-grid">
          <div>
            <Mark size={56} tone="A" />
            <p className="display-italic" style={{ fontSize: 20, marginTop: 24, marginBottom: 16, color: "var(--paper)" }}>
              Out Of This World
            </p>
            <p style={{ fontSize: 13, color: "var(--muted)", maxWidth: 320, lineHeight: 1.6 }}>
              An integrated ecosystem for consciousness, wellness, and human evolution.
            </p>
          </div>
          <div>
            <p className="mono-label" style={{ marginBottom: 20 }}>EXPLORE</p>
            <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 12 }}>
              {["Vision", "Ecosystem", "Approach", "Investor"].map((l) => (
                <li key={l}><a href={`#${l.toLowerCase()}`} data-cursor="hover" style={{ color: "var(--paper-dim)", textDecoration: "none", fontSize: 14 }}>{l}</a></li>
              ))}
            </ul>
          </div>
          <div>
            <p className="mono-label" style={{ marginBottom: 20 }}>CONTACT</p>
            <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 12 }}>
              <li><a href="mailto:relations@ootw.co" data-cursor="hover" style={{ color: "var(--paper-dim)", textDecoration: "none", fontSize: 14 }}>relations@ootw.co</a></li>
              <li><a href="mailto:hello@ootw.co" data-cursor="hover" style={{ color: "var(--paper-dim)", textDecoration: "none", fontSize: 14 }}>hello@ootw.co</a></li>
              <li><a href="mailto:press@ootw.co" data-cursor="hover" style={{ color: "var(--paper-dim)", textDecoration: "none", fontSize: 14 }}>press@ootw.co</a></li>
            </ul>
          </div>
          <div>
            <p className="mono-label" style={{ marginBottom: 20 }}>SIGNAL</p>
            <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 12 }}>
              <li><a href="#" data-cursor="hover" style={{ color: "var(--paper-dim)", textDecoration: "none", fontSize: 14 }}>Journal →</a></li>
              <li><a href="#" data-cursor="hover" style={{ color: "var(--paper-dim)", textDecoration: "none", fontSize: 14 }}>Oracle →</a></li>
              <li><a href="#" data-cursor="hover" style={{ color: "var(--paper-dim)", textDecoration: "none", fontSize: 14 }}>Transmissions →</a></li>
            </ul>
          </div>
        </div>

        {/* Tagline */}
        <div style={{
          padding: "40px 0",
          borderTop: "1px solid var(--hairline)",
          borderBottom: "1px solid var(--hairline)",
          textAlign: "center",
          marginBottom: 40,
        }}>
          <p className="display-italic" style={{
            fontSize: "clamp(24px, 3.4vw, 48px)",
            color: "var(--paper)",
            letterSpacing: "-0.02em",
          }}>
            We may not know you, but we are building for you.
          </p>
        </div>

        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 24 }}>
          <span className="mono-coord">© 2025 — 2026 OUT OF THIS WORLD, INC.</span>
          <span className="mono-coord">OOTW.CO</span>
        </div>

        <style>{`
          @media (max-width: 900px) {
            .footer-grid { grid-template-columns: 1fr 1fr !important; }
          }
          @media (max-width: 600px) {
            .footer-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </footer>
  );
};

Object.assign(window, { CurrentEcosystem, LongTerm, Investor, Closing, Footer });