// SKEight — Home page sections (continued)

// ─────────────────────────────────────────────────────────────
// DAILY — Daily insight section with phone preview
// ─────────────────────────────────────────────────────────────
function DailySection() {
  return (
    <section className="section">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.1fr)", gap: 64, alignItems: "center" }} className="two-col">
          <div style={{ display: "flex", justifyContent: "center", order: 1 }}>
            <div style={{ transform: "scale(0.7)", transformOrigin: "center" }}>
              <AppScreenshot image="relationships" alt="Real SKEight relationships report screenshot" />
            </div>
          </div>
          <div style={{ order: 2 }}>
            <div className="label-row">
              <span className="eyebrow">A daily reading</span>
            </div>
            <h2 className="title" style={{ marginBottom: 28 }}>
              One pillar a day. <em style={{ fontStyle: "italic", color: "var(--gold-light)" }}>One line</em> of reflection.
            </h2>
            <p className="body-text" style={{ maxWidth: 540, marginBottom: 24 }}>
              SKEight surfaces the day's pillar against your primary chart and explains the relationship in one short note: a small signal for the day.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              {[
                ["Read in 20 seconds", "Designed to be glanced at, not doom-scrolled."],
                ["Primary chart aware", "Choose the saved chart used for daily insight."],
                ["No daily push flow", "The app does not need notifications to make the daily card useful."],
              ].map(([t, d]) => (
                <div key={t} style={{ display: "flex", gap: 14, alignItems: "baseline" }}>
                  <div style={{ width: 6, height: 6, borderRadius: 1, background: "var(--gold)", flexShrink: 0, transform: "rotate(45deg)", marginTop: 8 }} />
                  <div>
                    <div style={{ fontSize: 15, color: "var(--ink)" }}>{t}</div>
                    <div style={{ fontSize: 13, color: "var(--ink-muted)", marginTop: 2 }}>{d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// TRUST — Responsibility statement
// ─────────────────────────────────────────────────────────────
function Trust() {
  return (
    <section className="section" style={{ background: "var(--bg-soft)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 0.8fr) minmax(0, 1.2fr)", gap: 64 }} className="two-col">
          <div>
            <div className="label-row">
              <span className="eyebrow">Responsibility</span>
            </div>
            <h2 className="title">
              A reading is a <em style={{ fontStyle: "italic", color: "var(--gold-light)" }}>frame</em>.
              <br />
              Decisions are yours.
            </h2>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            <TrustRow
              title="Cultural & educational use"
              body="SKEight is offered for self-reflection, cultural literacy, and personal study. It is not a substitute for professional advice of any kind."
            />
            <TrustRow
              title="Not medical advice"
              body="Health interpretations describe elemental tendencies in a traditional framework. They are not diagnoses and should not replace a doctor."
            />
            <TrustRow
              title="Not financial or legal advice"
              body="Career and timing notes are reflective in tone. Use them as one input among many when making real decisions."
            />
            <TrustRow
              title="Your data is yours"
              body="Charts stay on-device unless you sign in and sync. Synced chart data is stored with your SKEight account so it can be restored across devices."
            />
          </div>
        </div>
      </div>
    </section>
  );
}

function TrustRow({ title, body }) {
  return (
    <div style={{ paddingBottom: 24, borderBottom: "1px solid var(--hairline)" }}>
      <h4 className="serif" style={{ fontSize: 20, color: "var(--ink)", marginBottom: 8 }}>{title}</h4>
      <p className="body-text" style={{ margin: 0, fontSize: 14.5 }}>{body}</p>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// DOWNLOAD CTA
// ─────────────────────────────────────────────────────────────
function DownloadCTA() {
  return (
    <section className="section" id="download" style={{ paddingBottom: "clamp(80px, 12vw, 160px)" }}>
      <div className="container" style={{ textAlign: "center", position: "relative" }}>
        <div style={{
          position: "absolute", top: 0, left: "50%", transform: "translate(-50%, -30%)",
          opacity: 0.25, pointerEvents: "none",
        }}>
          <EightMark size={420} color="var(--gold)" opacity={0.4} />
        </div>
        <div className="mono" style={{
          fontSize: 14, letterSpacing: "0.3em", color: "var(--gold)",
          marginBottom: 28, position: "relative",
        }}>CHART · CYCLES · DAILY</div>
        <h2 className="display" style={{ maxWidth: 760, margin: "0 auto 32px", position: "relative" }}>
          Your chart is <em>waiting</em><br />to be read.
        </h2>
        <p className="lede" style={{ margin: "0 auto 40px", position: "relative" }}>
          SKEight is built for iPhone. Chart generation is free; deeper report sections are unlocked through Apple in-app purchases.
        </p>
        <div className="row" style={{ justifyContent: "center", position: "relative" }}>
          <a href="#" className="appstore-btn" aria-label="App Store link pending">
            <AppleGlyph size={26} color="#0e0c0a" />
            <span style={{ display: "flex", flexDirection: "column" }}>
              <span className="as-sub">Coming to the</span>
              <span className="as-main">App Store</span>
            </span>
          </a>
          <span style={{ color: "var(--ink-faint)", fontSize: 13, fontFamily: "var(--mono)", letterSpacing: "0.1em" }}>
            VERSION 1.0 · APP STORE LINK PENDING
          </span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { DailySection, Trust, DownloadCTA });