/* Core Statement, Vision, What We Do, Why This Matters */

const SectionLabel = ({ num, title, color = "var(--magenta)" }) => (
  <div style={{
    display: "flex",
    alignItems: "baseline",
    gap: 24,
    paddingBottom: 24,
    marginBottom: 64,
    borderBottom: "1px solid var(--hairline)",
  }}>
    <span className="mono-label" style={{ color }}>{num}</span>
    <span className="mono-label">{title}</span>
    <div style={{ flex: 1, height: 1, background: "var(--hairline)" }} />
    <Mark size={28} tone="A" spinning={true} />
  </div>
);

const CoreStatement = () => {
  return (
    <section id="vision" className="section-pad">
      <div className="container">
        <SectionLabel num="§ 01" title="CORE STATEMENT" />

        <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80 }} className="grid-2">
          <div>
            <p className="mono-label" style={{ marginBottom: 24, color: "var(--teal)" }}>Position</p>
            <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--muted)", maxWidth: 280 }}>
              We operate at the intersection of <em style={{ color: "var(--paper)" }}>six domains</em>, translating what has historically been fragmented into integrated, scalable systems.
            </p>
          </div>
          <div>
            <p className="display reveal" style={{
              fontSize: "clamp(36px, 5.2vw, 76px)",
              lineHeight: 1.05,
              letterSpacing: "-0.025em",
              marginBottom: 56,
            }}>
              Out Of This World exists to <span className="display-italic" style={{ color: "var(--magenta)" }}>design and scale</span> the next generation of <span className="display-italic" style={{ color: "var(--teal)" }}>human experience</span>.
            </p>

            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, marginTop: 64 }} className="hex-grid">
              {[
                { name: "Consciousness", color: "var(--magenta)" },
                { name: "Wellness", color: "var(--teal)" },
                { name: "Technology", color: "var(--gold)" },
                { name: "Culture", color: "var(--magenta)" },
                { name: "Infrastructure", color: "var(--teal)" },
                { name: "Embodiment", color: "var(--gold)" },
              ].map((d, i) => (
                <div key={d.name} className="hex-cell" data-cursor="hover" style={{
                  padding: "32px 24px",
                  borderRight: (i + 1) % 3 === 0 ? "none" : "1px solid var(--hairline)",
                  borderBottom: i < 3 ? "1px solid var(--hairline)" : "none",
                  position: "relative",
                  transition: "background 300ms",
                }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 16 }}>
                    <span style={{ width: 6, height: 6, borderRadius: 999, background: d.color }} />
                    <span className="mono-coord">0{i + 1}</span>
                  </div>
                  <p className="display" style={{ fontSize: 32, fontWeight: 300, letterSpacing: "-0.02em" }}>
                    {d.name}
                  </p>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 80, display: "flex", flexDirection: "column", gap: 16 }}>
              <p className="display" style={{ fontSize: "clamp(28px, 3vw, 44px)", fontStyle: "italic", color: "var(--paper-dim)" }}>
                We are more than a single product.
              </p>
              <p className="display" style={{ fontSize: "clamp(28px, 3vw, 44px)" }}>
                We are an <span className="display-italic" style={{ color: "var(--gold)" }}>ecosystem architecture</span>.
              </p>
            </div>
          </div>
        </div>

        <style>{`
          @media (max-width: 900px) {
            .grid-2 { grid-template-columns: 1fr !important; gap: 48px !important; }
            .hex-grid { grid-template-columns: repeat(2, 1fr) !important; }
            .hex-cell { border-right: 1px solid var(--hairline) !important; }
          }
        `}</style>
      </div>
    </section>
  );
};

const VisionStatement = () => {
  return (
    <section className="section-pad" style={{ position: "relative" }}>
      <div className="container">
        <SectionLabel num="§ 02" title="THE VISION" color="var(--teal)" />

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 120 }} className="grid-2">
          <div>
            <p className="display" style={{
              fontSize: "clamp(32px, 4vw, 60px)",
              lineHeight: 1.08,
              letterSpacing: "-0.025em",
              marginBottom: 48,
            }}>
              The modern world has advanced <em className="display-italic" style={{ color: "var(--paper-dim)" }}>technologically</em> while losing alignment with the <span className="display-italic" style={{ color: "var(--magenta)" }}>inner architecture</span> of the human being.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--paper-dim)", maxWidth: 540, marginBottom: 24 }}>
              Out Of This World is building a new foundation — one that reconnects individuals to clarity, presence, embodiment and self-directed growth while integrating seamlessly into modern systems.
            </p>
          </div>

          <div style={{ position: "relative" }}>
            <div style={{
              position: "sticky",
              top: 120,
              border: "1px solid var(--hairline-strong)",
              padding: "40px 32px",
              background: "rgba(20, 18, 42, 0.4)",
              backdropFilter: "blur(20px)",
              WebkitBackdropFilter: "blur(20px)",
            }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 32 }}>
                <span className="mono-label" style={{ color: "var(--gold)" }}>WE ARE CREATING</span>
                <Mark size={32} tone="D" />
              </div>

              <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 0 }}>
                {[
                  { label: "Tools for inner awareness", n: "i" },
                  { label: "Products for physical and emotional wellbeing", n: "ii" },
                  { label: "Platforms for guidance and integration", n: "iii" },
                  { label: "Infrastructure that supports long-term transformation", n: "iv" },
                ].map((item) => (
                  <li key={item.n} data-cursor="hover" style={{
                    padding: "20px 0",
                    borderBottom: "1px solid var(--hairline)",
                    display: "grid",
                    gridTemplateColumns: "32px 1fr auto",
                    alignItems: "center",
                    gap: 16,
                    transition: "padding 300ms",
                  }}
                  onMouseEnter={(e) => e.currentTarget.style.paddingLeft = "8px"}
                  onMouseLeave={(e) => e.currentTarget.style.paddingLeft = "0"}>
                    <span className="mono-coord" style={{ color: "var(--gold)" }}>{item.n}.</span>
                    <span style={{ fontSize: 16, color: "var(--paper)" }}>{item.label}</span>
                    <span style={{ color: "var(--gold)", opacity: 0.6 }}>→</span>
                  </li>
                ))}
              </ul>

              <div style={{ marginTop: 32, paddingTop: 24, borderTop: "1px solid var(--hairline-strong)" }}>
                <p className="mono-label" style={{ color: "var(--magenta)", marginBottom: 8 }}>NEW VERTICAL</p>
                <p className="display-italic" style={{ fontSize: 28, letterSpacing: "-0.02em" }}>
                  Consciousness Infrastructure
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { CoreStatement, VisionStatement, SectionLabel });