// Field stories — case studies grid with big metrics + how it works.

function Stories() {
  return (
    <section className="stories" id="stories">
      <div className="container">
        <div className="stories-head">
          <div className="eyebrow">Field stories</div>
          <h2 className="stories-title">
            Real chats.<br/><em>Real outcomes.</em>
          </h2>
          <p className="stories-sub">
            Every story below is from an actual Telegram thread. No invented metrics, no
            stock testimonials. Names, quotes and numbers ship with their evidence.
          </p>
        </div>

        <div className="stories-grid">
          {STORIES.map((s, i) => (
            <article className="story" key={s.n}>
              <div className="story-frame">
                <div className="story-head">
                  <span className="story-num">{s.n}</span>
                  <div className="story-spark">
                    <span className="story-spark-dot" />
                    <span className="story-spark-dot" />
                    <span className="story-spark-dot" />
                  </div>
                </div>

                <div className="story-metric">
                  <div className="story-metric-val">{s.metric}</div>
                  <div className="story-metric-unit">{s.unit}</div>
                </div>

                <h3 className="story-headline">{s.title}</h3>
                <p className="story-blurb">{s.blurb}</p>

                <div className="story-author">
                  <div className="story-avatar"><img src={s.avatar} alt={s.name} loading="lazy"/></div>
                  <div>
                    <div className="story-name">{s.name}</div>
                    <div className="story-role">{s.role}</div>
                  </div>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>

      <style>{`
        .stories {
          padding: 140px 0;
          position: relative;
                  }
        .stories-head { max-width: 720px; margin-bottom: 56px; }
        .stories-title {
          font-size: clamp(2.4rem, 4.5vw, 4rem);
          line-height: 1.0;
          letter-spacing: -0.04em;
          margin: 12px 0 22px;
        }
        .stories-title em {
          font-style: normal;
          background: linear-gradient(120deg, var(--accent-light), var(--accent));
          -webkit-background-clip: text; background-clip: text; color: transparent;
        }
        .stories-sub { color: var(--text-secondary); font-size: 17px; line-height: 1.6; }

        .stories-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 20px;
        }
        @media (max-width: 1000px) { .stories-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 660px) { .stories-grid { grid-template-columns: 1fr; } }

        .story {
          position: relative;
          transition: transform 240ms var(--ease-out);
        }
        .story:hover { transform: translateY(-4px); }

        .story-frame {
          position: relative;
          padding: 32px 28px 26px;
          background: var(--bg-card);
          border: 1px solid var(--border);
          border-radius: 16px;
          overflow: hidden;
          transition: border-color 240ms var(--ease-out), background 240ms var(--ease-out);
          min-height: 100%;
          display: flex; flex-direction: column;
        }
        .story:hover .story-frame {
          background: var(--bg-card-hover);
          border-color: color-mix(in oklch, var(--accent) 30%, var(--border));
        }
        .story-frame::after {
          content: "";
          position: absolute;
          left: 0; right: 0; bottom: 0;
          height: 2px;
          background: var(--accent);
          transform: scaleX(0);
          transform-origin: left;
          transition: transform 320ms var(--ease-out);
        }
        .story:hover .story-frame::after { transform: scaleX(1); }

        .story-head {
          display: flex; justify-content: space-between; align-items: center;
          margin-bottom: 20px;
        }
        .story-num {
          font-family: var(--font-mono);
          font-size: 13px;
          letter-spacing: 0.2em;
          color: var(--accent-light);
          font-weight: 600;
        }
        .story-spark { display: flex; gap: 4px; }
        .story-spark-dot {
          width: 4px; height: 4px;
          border-radius: 50%;
          background: var(--text-muted);
        }

        .story-metric {
          margin: 8px 0 24px;
        }
        .story-metric-val {
          font-family: var(--font-heading);
          font-size: clamp(3.2rem, 5vw, 4.5rem);
          font-weight: 800;
          letter-spacing: -0.05em;
          line-height: 0.95;
          color: var(--text);
          background: linear-gradient(180deg, var(--text) 0%, var(--accent-light) 120%);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }
        .story-metric-unit {
          margin-top: 8px;
          font-family: var(--font-mono);
          font-size: 12px;
          letter-spacing: 0.15em;
          text-transform: uppercase;
          color: var(--text-muted);
        }

        .story-headline {
          font-size: 22px;
          line-height: 1.2;
          letter-spacing: -0.025em;
          color: var(--text);
          margin-bottom: 12px;
          white-space: pre-line;
        }
        .story-blurb {
          font-size: 14.5px;
          color: var(--text-secondary);
          line-height: 1.6;
          flex: 1;
          margin-bottom: 22px;
        }

        .story-author {
          display: flex; align-items: center; gap: 12px;
          padding-top: 18px;
          border-top: 1px dashed var(--border);
        }
        .story-avatar {
          width: 36px; height: 36px;
          border-radius: 50%;
          overflow: hidden;
          flex-shrink: 0;
          border: 1.5px solid color-mix(in oklch, var(--accent) 35%, var(--border));
        }
        .story-avatar img { width: 100%; height: 100%; object-fit: cover; }
        .story-name {
          font-size: 14px;
          font-weight: 600;
          color: var(--text);
        }
        .story-role {
          font-family: var(--font-mono);
          font-size: 11px;
          color: var(--text-muted);
          letter-spacing: 0.05em;
        }
      `}</style>
    </section>
  );
}

function HowItWorks() {
  return (
    <section className="how" id="how">
      <div className="container">
        <div className="how-head">
          <div className="eyebrow">3-minute setup</div>
          <h2 className="how-title">
            How to start using <em>octodus</em>.
          </h2>
        </div>

        <div className="how-steps">
          {HOW_STEPS.map((s, i) => (
            <div className="how-step" key={s.n}>
              <div className="how-rail">
                <span className="how-rail-dot" />
                {i < HOW_STEPS.length - 1 && <span className="how-rail-line" />}
              </div>
              <div className="how-card">
                <div className="how-step-num">{s.n}</div>
                <div className="how-card-text">
                  <h3 className="how-step-title">{s.title}</h3>
                  <p className="how-step-body">{s.body}</p>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="how-foot">
          <span className="eyebrow">No code · No prompts · No dashboards</span>
          <a className="btn btn-primary" href="https://calend.ly/emdx" target="_blank" rel="noopener">
            {Icons.telegram({ width: 16, height: 16 })} Add to Telegram now {Icons.arrow({ width: 16, height: 16 })}
          </a>
        </div>
      </div>

      <style>{`
        .how {
          padding: 120px 0;
          position: relative;
        }
        .how::before {
          content: "";
          position: absolute;
          inset: 0;
          background: radial-gradient(ellipse 50% 40% at 50% 30%, var(--accent-tint-04), transparent);
          pointer-events: none;
        }
        .how-head { max-width: 720px; margin-bottom: 64px; }
        .how-title {
          font-size: clamp(2.4rem, 4.5vw, 3.8rem);
          line-height: 1.0;
          letter-spacing: -0.04em;
          margin-top: 12px;
        }
        .how-title em { font-style: normal; color: var(--accent-light); }

        .how-steps {
          display: flex;
          flex-direction: column;
          gap: 0;
        }
        .how-step {
          display: grid;
          grid-template-columns: 60px 1fr;
          gap: 0;
        }
        .how-rail {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding-top: 36px;
        }
        .how-rail-dot {
          width: 12px; height: 12px;
          border-radius: 50%;
          background: var(--accent);
          box-shadow: 0 0 0 4px var(--accent-tint-18),
                      0 0 24px var(--accent-tint-50);
          flex-shrink: 0;
        }
        .how-rail-line {
          width: 1px;
          flex: 1;
          margin-top: 8px;
          background: linear-gradient(180deg, var(--accent-tint-40), var(--accent-tint-04));
        }
        .how-card {
          padding: 28px 0;
          border-bottom: 1px dashed var(--border);
          display: grid;
          grid-template-columns: 80px 1fr;
          gap: 32px;
          align-items: baseline;
        }
        .how-step:last-child .how-card { border-bottom: none; }
        .how-step-num {
          font-family: var(--font-mono);
          font-size: 13px;
          letter-spacing: 0.2em;
          color: var(--accent-light);
          padding-top: 8px;
        }
        .how-step-title {
          font-size: clamp(1.5rem, 2.5vw, 2rem);
          line-height: 1.1;
          letter-spacing: -0.03em;
          margin-bottom: 12px;
        }
        .how-step-body {
          font-size: 16px;
          line-height: 1.6;
          color: var(--text-secondary);
          max-width: 560px;
        }

        @media (max-width: 640px) {
          .how-card { grid-template-columns: 1fr; gap: 12px; }
          .how-step { grid-template-columns: 40px 1fr; }
        }

        .how-foot {
          margin-top: 56px;
          padding-top: 36px;
          border-top: 1px solid var(--border);
          display: flex; justify-content: space-between; align-items: center;
          gap: 24px;
          flex-wrap: wrap;
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Stories, HowItWorks });
