// SKEight — Home page sections (continued)

// ─────────────────────────────────────────────────────────────
// FEATURES — Detailed feature grid
// ─────────────────────────────────────────────────────────────
function Features() {
  const items = [
    { en: "Chart Structure", desc: "Year, month, day, and hour pillars calculated with solar-term boundaries and true-solar-time correction." },
    { en: "Day Master", desc: "The central reference point of the chart, explained in plain language without making it sound like a verdict." },
    { en: "Element Balance", desc: "Wood, Fire, Earth, Metal, and Water are counted, weighted, and graphed across visible and hidden chart signals." },
    { en: "Ten-Year Cycles", desc: "Past, current, and future phases are laid out as a timeline you can return to." },
    { en: "Year-by-Year", desc: "Annual pillars inside the current ten-year cycle, with career, health, and relationship signals shown in context." },
    { en: "Daily Insight", desc: "Today’s pillar relationship to your primary chart, paired with a short reflective note." },
  ];
  return (
    <section className="section" id="features">
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 56, flexWrap: "wrap", gap: 24 }}>
          <div>
            <div className="label-row" style={{ marginBottom: 18 }}>
              <span className="eyebrow">What's inside</span>
            </div>
            <h2 className="title" style={{ maxWidth: 720 }}>
              A complete reading — and a place to <em style={{ fontStyle: "italic", color: "var(--gold-light)" }}>return to it</em>.
            </h2>
          </div>
          <a href="features.html" className="btn btn-ghost">Method &amp; sources →</a>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          borderTop: "1px solid var(--hairline)",
          borderLeft: "1px solid var(--hairline)",
        }} className="features-grid">
          {items.map((it, i) => (
            <div key={i} style={{
              padding: "32px 28px 36px",
              borderRight: "1px solid var(--hairline)",
              borderBottom: "1px solid var(--hairline)",
              position: "relative",
              transition: "background 0.3s",
            }} className="feature-cell">
              <div style={{
                display: "flex", justifyContent: "space-between", alignItems: "flex-start",
                marginBottom: 28,
              }}>
                <span className="mono" style={{ fontSize: 10, color: "var(--ink-faint)", letterSpacing: "0.15em" }}>
                  0{i + 1}
                </span>
              </div>
              <h3 className="serif" style={{ fontSize: 22, color: "var(--ink)", marginBottom: 10, letterSpacing: "-0.01em" }}>
                {it.en}
              </h3>
              <p className="body-text" style={{ fontSize: 14, margin: 0 }}>{it.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// FIVE ELEMENTS — Visual section
// ─────────────────────────────────────────────────────────────
function FiveElements() {
  const els = ["wood", "fire", "earth", "metal", "water"];
  return (
    <section className="section" style={{ background: "var(--bg-soft)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.3fr)", gap: 64, alignItems: "center" }} className="two-col">
          <div>
            <div className="label-row">
              <span className="eyebrow">Five elements</span>
            </div>
            <h2 className="title" style={{ marginBottom: 24 }}>
              Five elements,<br />in <em style={{ fontStyle: "italic", color: "var(--gold-light)" }}>quiet conversation</em>.
            </h2>
            <p className="body-text" style={{ maxWidth: 480 }}>
              Every pillar carries elements that generate, control, and balance each other. SKEight surfaces those relationships in plain English — without the cliché charts you've already seen.
            </p>
            <div style={{ marginTop: 28, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              <Cycle label="Generating" desc="Wood feeds Fire feeds Earth…" />
              <Cycle label="Controlling" desc="Water tempers Fire; Metal cuts Wood…" />
            </div>
          </div>

          <div style={{ position: "relative", aspectRatio: "1 / 1", maxWidth: 520, margin: "0 auto", width: "100%" }}>
            <ElementsRing els={els} />
          </div>
        </div>
      </div>
    </section>
  );
}

function Cycle({ label, desc }) {
  return (
    <div style={{ padding: "14px 16px", border: "1px solid var(--hairline)", background: "rgba(245,240,230,0.02)" }}>
      <div className="cap" style={{ marginBottom: 4 }}>{label}</div>
      <div style={{ fontSize: 13, color: "var(--ink-muted)" }}>{desc}</div>
    </div>
  );
}

function ElementsRing({ els }) {
  // pentagonal arrangement
  const size = 480;
  const r = size / 2;
  const radius = r * 0.78;
  const positions = els.map((el, i) => {
    const a = (Math.PI * 2 * i) / 5 - Math.PI / 2;
    return { el, x: r + Math.cos(a) * radius, y: r + Math.sin(a) * radius };
  });
  // generating cycle lines (each → next)
  // controlling cycle lines (each → +2)
  return (
    <svg viewBox={`0 0 ${size} ${size}`} width="100%" height="100%" style={{ display: "block" }}>
      {/* outer ring */}
      <circle cx={r} cy={r} r={radius + 36} stroke="var(--hairline)" fill="none" />
      <circle cx={r} cy={r} r={radius - 36} stroke="var(--hairline)" fill="none" />
      {/* generating arrows (warm) */}
      {positions.map((p, i) => {
        const next = positions[(i + 1) % 5];
        return (
          <line key={`g${i}`} x1={p.x} y1={p.y} x2={next.x} y2={next.y}
            stroke="rgba(184,137,58,0.35)" strokeWidth="1" />
        );
      })}
      {/* controlling lines (subtle, dashed) */}
      {positions.map((p, i) => {
        const next = positions[(i + 2) % 5];
        return (
          <line key={`c${i}`} x1={p.x} y1={p.y} x2={next.x} y2={next.y}
            stroke="rgba(196,92,61,0.18)" strokeWidth="0.8" strokeDasharray="3 4" />
        );
      })}
      {/* nodes */}
      {positions.map(({ el, x, y }) => {
        const info = ELEMENT_INFO[el];
        return (
          <g key={el}>
            <circle cx={x} cy={y} r="44" fill="var(--bg)" stroke={info.color} strokeWidth="1" opacity="0.95" />
            <circle cx={x} cy={y} r="44" fill={info.soft} />
            <text x={x} y={y + 4} textAnchor="middle"
              style={{ fontFamily: "var(--mono)", fontSize: 9, fill: "var(--ink-faint)", letterSpacing: "0.18em" }}>
              {info.en.toUpperCase()}
            </text>
          </g>
        );
      })}
      {/* center label */}
      <text x={r} y={r + 4} textAnchor="middle"
        style={{ fontFamily: "var(--mono)", fontSize: 10, fill: "var(--ink-faint)", letterSpacing: "0.25em" }}>ELEMENTS</text>
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────
// READING ANGLES — career, relationships, health
// ─────────────────────────────────────────────────────────────
function ReadingAngles() {
  const angles = [
    { en: "Career", note: "Where the chart gathers drive, pressure, craft, and the way you meet the outer world." },
    { en: "Relationships", note: "The rhythm of attraction, distance, support, and tension around the people closest to you." },
    { en: "Health", note: "Elemental imbalance described in the traditional language of Wood, Fire, Earth, Metal, and Water." },
  ];
  return (
    <section className="section" style={{ background: "var(--bg-soft)" }}>
      <div className="container">
        <div className="label-row">
          <span className="eyebrow">Reading angles</span>
        </div>
        <h2 className="title" style={{ marginBottom: 56, maxWidth: 880 }}>
          Three doors into the same chart — each opening a different part of the pattern.
        </h2>
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
          gap: 0, border: "1px solid var(--hairline)",
        }} className="angles-grid">
          {angles.map((a, i) => (
            <div key={a.en} style={{
              padding: "40px 28px 32px",
              borderRight: i < angles.length - 1 ? "1px solid var(--hairline)" : "0",
              position: "relative",
            }}>
              <div className="mono" style={{ fontSize: 10, color: "var(--gold)", letterSpacing: "0.18em", marginBottom: 24 }}>0{i + 1}</div>
              <div className="serif" style={{ fontSize: 22, color: "var(--ink)", marginBottom: 10 }}>{a.en}</div>
              <div className="body-text" style={{ fontSize: 13.5, margin: 0 }}>{a.note}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Features, FiveElements, ReadingAngles });
