/* What We Do, Why This Matters, Our Approach */

const WhatWeDo = () => {
  const [active, setActive] = React.useState(0);
  const focuses = [
    {
      label: "Digital Guidance Systems",
      kind: "AI / Software",
      desc: "AI-driven platforms that support self-awareness, emotional processing, and personal growth.",
      products: ["OOTW Spirit Guide", "Grace", "Veteran App"],
      color: "var(--magenta)",
    },
    {
      label: "Functional & Experiential Products",
      kind: "Consumables",
      desc: "Premium consumables designed to enhance presence, mood, and connection.",
      products: ["OOTW Chocolate", "Cacao", "Ritual Products"],
      color: "var(--gold)",
    },
    {
      label: "Content & Knowledge Platforms",
      kind: "Media",
      desc: "Media ecosystems that educate, guide, and expand perception.",
      products: ["OOTW Journal", "Oracle"],
      color: "var(--teal)",
    },
    {
      label: "Clinical & Biotech Partnerships",
      kind: "Research",
      desc: "Advancing the future of therapeutic and consciousness-based treatments.",
      products: ["Strategic partnerships in research and trials"],
      color: "var(--magenta)",
    },
    {
      label: "SaaS Infrastructure for Healing & Wellness",
      kind: "B2B Platform",
      desc: "Scalable platforms for practitioners, facilitators, and institutions.",
      products: ["Practitioner Suite", "Facilitator OS", "Institution Tools"],
      color: "var(--gold)",
    },
  ];

  return (
    <section id="ecosystem" className="section-pad">
      <div className="container">
        <SectionLabel num="§ 03" title="WHAT WE DO" color="var(--gold)" />

        <div style={{ marginBottom: 80, maxWidth: 880 }}>
          <p className="display" style={{
            fontSize: "clamp(36px, 5vw, 72px)",
            lineHeight: 1.05,
            letterSpacing: "-0.025em",
          }}>
            We design and deploy systems that translate <span className="display-italic" style={{ color: "var(--magenta)" }}>internal transformation</span> into <span className="display-italic" style={{ color: "var(--teal)" }}>real-world impact</span>.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 0, border: "1px solid var(--hairline)" }} className="wwd-grid">
          {/* Left: list */}
          <div style={{ borderRight: "1px solid var(--hairline)" }} className="wwd-list">
            {focuses.map((f, i) => (
              <button
                key={i}
                data-cursor="hover"
                onClick={() => setActive(i)}
                onMouseEnter={() => setActive(i)}
                style={{
                  width: "100%",
                  textAlign: "left",
                  background: active === i ? "rgba(229, 25, 127, 0.06)" : "transparent",
                  border: "none",
                  borderBottom: i < focuses.length - 1 ? "1px solid var(--hairline)" : "none",
                  padding: "32px 36px",
                  cursor: "none",
                  color: "var(--paper)",
                  fontFamily: "inherit",
                  display: "grid",
                  gridTemplateColumns: "44px 1fr auto",
                  alignItems: "center",
                  gap: 20,
                  transition: "background 240ms",
                  position: "relative",
                }}
              >
                {active === i && (
                  <span style={{
                    position: "absolute",
                    left: 0, top: 0, bottom: 0,
                    width: 2,
                    background: f.color,
                  }} />
                )}
                <span className="mono-coord" style={{ color: active === i ? f.color : "var(--muted)" }}>0{i + 1}</span>
                <div>
                  <p className="display" style={{
                    fontSize: "clamp(20px, 2.2vw, 30px)",
                    fontWeight: 300,
                    letterSpacing: "-0.015em",
                    lineHeight: 1.15,
                    color: active === i ? "var(--paper)" : "var(--paper-dim)",
                  }}>
                    {f.label}
                  </p>
                  <p className="mono-coord" style={{ marginTop: 6 }}>{f.kind}</p>
                </div>
                <span style={{
                  color: active === i ? f.color : "var(--muted)",
                  fontSize: 20,
                  transform: active === i ? "translateX(0)" : "translateX(-6px)",
                  transition: "all 240ms",
                }}>→</span>
              </button>
            ))}
          </div>

          {/* Right: detail */}
          <div style={{ padding: "48px 48px", display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: 480 }}>
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 32 }}>
                <span style={{ width: 8, height: 8, background: focuses[active].color, borderRadius: 999 }} />
                <span className="mono-label" style={{ color: focuses[active].color }}>FOCUS · 0{active + 1} / 05</span>
                <div style={{ flex: 1, height: 1, background: "var(--hairline)" }} />
              </div>

              <p className="display" style={{
                fontSize: "clamp(28px, 3.4vw, 48px)",
                lineHeight: 1.1,
                fontStyle: "italic",
                color: "var(--paper)",
                marginBottom: 24,
              }}>
                {focuses[active].desc}
              </p>
            </div>

            <div>
              <p className="mono-label" style={{ marginBottom: 16, color: "var(--muted)" }}>ACTIVE PROJECTS</p>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                {focuses[active].products.map((p) => (
                  <span key={p} style={{
                    padding: "10px 16px",
                    border: `1px solid ${focuses[active].color}`,
                    color: focuses[active].color,
                    fontFamily: "var(--font-mono)",
                    fontSize: 11,
                    letterSpacing: "0.12em",
                    textTransform: "uppercase",
                  }}>{p}</span>
                ))}
              </div>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 100, maxWidth: 760 }}>
          <p className="display" style={{
            fontSize: "clamp(24px, 3vw, 40px)",
            lineHeight: 1.2,
            color: "var(--paper-dim)",
            fontStyle: "italic",
          }}>
            We take what is intangible — <span style={{ color: "var(--magenta)" }}>awareness</span>, <span style={{ color: "var(--teal)" }}>clarity</span>, <span style={{ color: "var(--gold)" }}>transformation</span> — and build systems that make it accessible, repeatable, scalable and embodied.
          </p>
        </div>

        <style>{`
          @media (max-width: 900px) {
            .wwd-grid { grid-template-columns: 1fr !important; }
            .wwd-list { border-right: none !important; border-bottom: 1px solid var(--hairline); }
          }
        `}</style>
      </div>
    </section>
  );
};

const WhyThisMatters = () => {
  const demands = [
    "Mental clarity",
    "Emotional regulation",
    "Meaningful connection",
    "Expanded awareness",
  ];
  const beliefs = [
    "Human potential expands when given the right tools",
    "Inner coherence leads to external impact",
    "The future of wellness is integrated and embodied without fragmented",
  ];

  return (
    <section className="section-pad" style={{
      background: "linear-gradient(180deg, transparent 0%, rgba(27, 24, 64, 0.4) 50%, transparent 100%)",
    }}>
      <div className="container">
        <SectionLabel num="§ 04" title="WHY THIS MATTERS" color="var(--magenta)" />

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, marginBottom: 100 }} className="grid-2">
          <div>
            <p className="mono-label" style={{ color: "var(--magenta)", marginBottom: 32 }}>GROWING GLOBAL DEMAND</p>
            <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
              {demands.map((d, i) => (
                <div key={d} data-cursor="hover" style={{
                  padding: "24px 0",
                  borderTop: "1px solid var(--hairline)",
                  borderBottom: i === demands.length - 1 ? "1px solid var(--hairline)" : "none",
                  display: "grid",
                  gridTemplateColumns: "60px 1fr auto",
                  alignItems: "center",
                  gap: 24,
                }}>
                  <span className="mono-coord">D.0{i + 1}</span>
                  <p className="display" style={{
                    fontSize: "clamp(28px, 3.4vw, 48px)",
                    fontWeight: 300,
                    letterSpacing: "-0.02em",
                  }}>{d}</p>
                  <svg width="40" height="14" viewBox="0 0 40 14">
                    <path d={`M 0 7 Q ${10 + i * 4} ${i % 2 ? 1 : 13} ${20 + i * 2} 7 T 40 7`} stroke="var(--magenta)" strokeWidth="0.8" fill="none" />
                  </svg>
                </div>
              ))}
            </div>
            <p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--muted)", marginTop: 32, maxWidth: 440 }}>
              Existing systems are not designed to meet this demand. Out Of This World addresses this gap by building aligned alternatives — solutions that integrate into modern life while supporting deeper human development.
            </p>
          </div>

          <div style={{
            padding: "48px 40px",
            border: "1px solid var(--gold)",
            position: "relative",
            background: "rgba(217, 180, 91, 0.03)",
          }}>
            <div style={{ position: "absolute", top: -1, left: -1, width: 14, height: 14, borderTop: "2px solid var(--gold)", borderLeft: "2px solid var(--gold)" }} />
            <div style={{ position: "absolute", top: -1, right: -1, width: 14, height: 14, borderTop: "2px solid var(--gold)", borderRight: "2px solid var(--gold)" }} />
            <div style={{ position: "absolute", bottom: -1, left: -1, width: 14, height: 14, borderBottom: "2px solid var(--gold)", borderLeft: "2px solid var(--gold)" }} />
            <div style={{ position: "absolute", bottom: -1, right: -1, width: 14, height: 14, borderBottom: "2px solid var(--gold)", borderRight: "2px solid var(--gold)" }} />

            <p className="mono-label" style={{ color: "var(--gold)", marginBottom: 32 }}>WE BELIEVE</p>
            <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 32 }}>
              {beliefs.map((b, i) => (
                <li key={i} style={{ display: "flex", gap: 20, alignItems: "flex-start" }}>
                  <span style={{
                    fontFamily: "var(--font-display)",
                    fontStyle: "italic",
                    fontSize: 32,
                    color: "var(--gold)",
                    lineHeight: 1,
                    marginTop: -4,
                  }}>{i + 1}</span>
                  <p className="display" style={{
                    fontSize: 22,
                    lineHeight: 1.25,
                    fontStyle: "italic",
                    color: "var(--paper)",
                    fontWeight: 300,
                  }}>{b}</p>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
};

const OurApproach = () => {
  const principles = [
    "We build long-term systems",
    "We prioritize quality, integrity, and coherence at scale",
    "We integrate technology, biology, and consciousness into unified experiences",
    "We expand based on signal, not noise",
  ];
  return (
    <section id="approach" className="section-pad">
      <div className="container">
        <SectionLabel num="§ 05" title="OUR APPROACH" color="var(--teal)" />

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "start" }} className="grid-2">
          <div style={{ position: "sticky", top: 120 }}>
            <p className="display" style={{
              fontSize: "clamp(40px, 5.5vw, 84px)",
              lineHeight: 1,
              letterSpacing: "-0.04em",
              marginBottom: 32,
            }}>
              We operate <br/>
              <span className="display-italic" style={{ color: "var(--teal)" }}>differently</span>.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--paper-dim)", maxWidth: 480 }}>
              We create higher vibrational trends. We build for <em style={{ color: "var(--gold)" }}>generational impact</em>.
            </p>
          </div>
          <div style={{ display: "flex", flexDirection: "column" }}>
            {principles.map((p, i) => (
              <div key={i} data-cursor="hover" style={{
                padding: "32px 0",
                borderBottom: "1px solid var(--hairline)",
                display: "grid",
                gridTemplateColumns: "auto 1fr",
                gap: 24,
                alignItems: "baseline",
              }}>
                <span style={{
                  fontFamily: "var(--font-display)",
                  fontSize: 56,
                  fontWeight: 200,
                  color: "var(--teal)",
                  letterSpacing: "-0.03em",
                  lineHeight: 1,
                }}>0{i + 1}</span>
                <p className="display" style={{
                  fontSize: "clamp(20px, 2.4vw, 32px)",
                  fontWeight: 300,
                  lineHeight: 1.2,
                  letterSpacing: "-0.015em",
                  color: "var(--paper)",
                }}>{p}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { WhatWeDo, WhyThisMatters, OurApproach });