// Features that actually exist per the marketing brief.
// No fabricated rule-routing, no WebP/AVIF, no ZIP, no WAV→MP3.
const FEATURES = [
  { tag: "JPG",  label: "Compress in place" },
  { tag: "HEIC", label: "Convert to JPG" },
  { tag: "MOV",  label: "Compress with CRF" },
  { tag: "PNG",  label: "Drag back out" },
  { tag: "PDF",  label: "Reveal in Finder" },
  { tag: "GIF",  label: "Move to Trash" },
];

function SmartActions() {
  return (
    <section id="features">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Features</div>
          <h2>Compress without leaving the shelf.</h2>
          <p className="lede">
            Right-click any file on the shelf. A four-megabyte photo becomes a
            four-hundred-kilobyte JPG. A 4K capture becomes a Slack-friendly
            clip. The original stays untouched until you tell it not to.
          </p>
        </div>

        {/* Outer 3-column layout: real product screenshots flank the cards.
            The screenshots are real PNGs of the app (heic_action is square-ish,
            stack_example is a tall full-shelf shot) — keeping them outside the
            cards means the cards stay at their natural height. */}
        <div className="features-layout">
          <aside className="features-shot features-shot-left">
            <img className="themed-img themed-light" src="assets/heic_action.png"      alt="A HEIC photo on the Flik shelf with a Convert to JPG action" />
            <img className="themed-img themed-dark"  src="assets/heic_action_dark.png" alt="A HEIC photo on the Flik shelf with a Convert to JPG action, dark mode" />
          </aside>

          <div className="actions-grid">
            {/* Left column: two stacked cards, mirroring the right column's
                Auto-expiry + Stacks shape. The first card (action menu) is
                the primary feature beat; the second (Finder gestures) fills
                what used to be empty whitespace below the action pills. */}
            <div className="actions-stack">
              <div className="actions-main glass">
                <h3 style={{ fontSize: 22, marginBottom: 12 }}>One right-click. Done.</h3>
                <p style={{ maxWidth: "44ch" }}>
                  Image and video conversions run locally — no upload, no
                  round-trip to a cloud service, no second window. Powered by
                  Apple's native AVFoundation, VideoToolbox, and CoreImage
                  frameworks. Nothing extra bundled.
                </p>
                <div className="actions-list">
                  {FEATURES.map((a, i) => (
                    <div className="action-pill" key={i}>
                      <span className="ico">{a.tag}</span>
                      <span>{a.label}</span>
                    </div>
                  ))}
                </div>
                <div className="ffmpeg-tag">AVFOUNDATION · VIDEOTOOLBOX · COREIMAGE · ON-DEVICE ONLY</div>
              </div>

              <div className="glass action-finder">
                <div>
                  <div className="eyebrow" style={{ marginBottom: 12 }}>Familiar gestures</div>
                  <h3 style={{ fontSize: 20 }}>Acts like Finder.</h3>
                  <p style={{ marginTop: 10, fontSize: 14 }}>
                    Same muscle memory you already have. Files behave the way
                    you'd expect — no new keybindings, no app-specific quirks.
                  </p>
                </div>
                <div className="gesture-pills">
                  <span className="gesture-pill">
                    <kbd>Double-click</kbd>
                    <span>opens the file</span>
                  </span>
                  <span className="gesture-pill">
                    <kbd>Right-click</kbd>
                    <span>action menu</span>
                  </span>
                  <span className="gesture-pill">
                    <kbd>Drag out</kbd>
                    <span>send anywhere</span>
                  </span>
                </div>
              </div>
            </div>

            <div className="actions-side">
              <div className="glass">
                <div>
                  <div className="eyebrow" style={{ marginBottom: 12 }}>Auto-expiry</div>
                  <h3 style={{ fontSize: 20 }}>Tidy by default, not by discipline.</h3>
                  <p style={{ marginTop: 10, fontSize: 14 }}>
                    Files older than two days quietly move to{" "}
                    <code style={{ fontFamily: "var(--font-mono)", fontSize: 12, background: "var(--code-bg)", padding: "1px 6px", borderRadius: 4 }}>~/Flik Expired/YYYY-MM-DD/</code>.
                    Items about to expire <span className="warn-pill">turn yellow</span> on
                    the shelf, so nothing important slips by. Nothing is ever
                    deleted — empty the folder when you're sure.
                  </p>
                </div>
                <div style={{ display: "flex", alignItems: "center", gap: 12, paddingTop: 16 }}>
                  <div style={{ flex: 1, height: 6, borderRadius: 999, background: "var(--code-bg)", overflow: "hidden", display: "flex" }}>
                    <div style={{ width: "55%", height: "100%", background: "var(--accent)" }}></div>
                    <div style={{ width: "25%", height: "100%", background: "var(--warn)" }}></div>
                  </div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)" }}>2 days · configurable</div>
                </div>
              </div>

              <div className="glass">
                <div>
                  <div className="eyebrow" style={{ marginBottom: 12 }}>Stacks</div>
                  <h3 style={{ fontSize: 20 }}>Bundle. Don't bury.</h3>
                  <p style={{ marginTop: 10, fontSize: 14 }}>
                    Group related files into a single shelf entry. Expand on
                    hover. Collapse when you're done. The shelf stays glanceable
                    even when you're working with a lot.
                  </p>
                </div>
              </div>
            </div>
          </div>

          <aside className="features-shot features-shot-right">
            <img className="themed-img themed-light" src="assets/stack_example.png"      alt="A two-file stack expanded on the Flik shelf" />
            <img className="themed-img themed-dark"  src="assets/stack_example_dark.png" alt="A two-file stack expanded on the Flik shelf, dark mode" />
          </aside>
        </div>
      </div>
    </section>
  );
}

window.SmartActions = SmartActions;