// Real app captures; full-size links preserve the original screenshot dimensions.
function ProductShot({ file, alt, caption, eager = false }) {
  const dimensions = {
    'command-bar-hero.png': [2422, 1596],
    'apps-search.png': [2138, 1342],
    'files-browsing.png': [1668, 1186],
    'clipboard-search.png': [1658, 1166],
    '07-snippet-editor.png': [480, 417],
    '08-action-library.png': [760, 704],
  };
  const [width, height] = dimensions[file] || [1050, 680];
  return <figure className="product-shot">
    <a href={'assets/screenshots/' + file} target="_blank" rel="noopener" aria-label={alt + ' — open full-size image'}>
      <img src={'assets/screenshots/' + file} alt={alt} width={width} height={height} loading={eager ? 'eager' : 'lazy'} decoding="async" />
    </a>
    {caption && <figcaption>{caption}</figcaption>}
  </figure>;
}
function EverydayFeatures() {
  return <section id="features" className="section seam"><div className="wrap-wide">
    <SectionHead eyebrow="Everyday, at your keyboard" title="The things you reach for all day." sub="Keep everyday Mac tasks close to the keyboard. These tools work without an AI API key." />
    <article className="feature-story">
      <div className="feature-copy"><Eyebrow>01 / Apps</Eyebrow><h3>Open an app. Keep moving.</h3><p>Type an application’s name, select it, and press Enter. Caret launches it and gets out of the way.</p><p className="feature-note">Your installed applications, ready when you are.</p><div className="feature-keys">Your Caret shortcut → Safari → <Key>Enter</Key></div></div>
      <ProductShot file="apps-search.png" alt="Searching installed apps for Safari in Caret" />
    </article>
    <article className="feature-story">
      <div className="feature-copy"><Eyebrow>02 / Files</Eyebrow><h3>Find the file.<br />Browse the folder.</h3><p>Use <Key>sf</Key> to open file search. Start with recent files, search by filename, or type a path.</p><p><Key>Tab</Key> completes a selected folder and browses its contents in Caret. <Key>Enter</Key> opens the file, or opens a folder in Finder.</p><div className="feature-keys">Type ~/work → Tab → ↑/↓ → Enter</div><p className="feature-note">Filename and path search. The example path illustrates the same browsing flow as the demo folder shown.</p></div>
      <div><ProductShot file="files-browsing.png" alt="Browsing a demo workspace folder inside Caret" /><details className="extra-shot"><summary>See a file preview</summary><ProductShot file="04-file-preview.png" alt="Caret preview of a selected demo file" /></details></div>
    </article>
    <article className="feature-story">
      <div className="feature-copy"><Eyebrow>03 / Clipboard</Eyebrow><h3>Find what you copied.</h3><p>Search copied text, move through results, and inspect a larger preview. Keep images alongside text, and paste the selected item back into the app you came from.</p><div className="feature-keys">⌘⇧V by default · Type to filter · ↑/↓ · Enter</div><p className="feature-note">Shortcut configurable. Image search uses metadata and titles, without reading text inside images.</p><p className="feature-note">Stored on your Mac. Up to 200 entries, 30 days and 100 MB. Pause recording or clear history in Settings.</p></div>
      <div><ProductShot file="clipboard-search.png" alt="Searchable copied text and a larger preview in Caret clipboard history" /><details className="extra-shot"><summary>See image history</summary><ProductShot file="06-clipboard-image.png" alt="An illustrative Launch week image in Caret clipboard history" /></details></div>
    </article>
    <article className="feature-story">
      <div className="feature-copy"><Eyebrow>04 / Snippets</Eyebrow><h3>Type less.<br />Say the same thing.</h3><p>Save a keyword and the text it should become. Type <Key>@@</Key> in another app and it expands into your email address—without opening Caret.</p><div className="snippet-example"><span className="eyebrow">Example illustration</span><div><Key>@@</Key><span> → </span><span>hello@example.com</span></div></div><p className="feature-note">Case-sensitive keywords expand immediately without a trailing space and can be paused individually. Requires Accessibility access, skips secure input and leaves the clipboard unchanged.</p></div>
      <ProductShot file="07-snippet-editor.png" alt="Unsaved example snippet draft in Caret Settings" caption="Settings → Snippets → Add Snippet" />
    </article>
    <aside className="window-note"><Icon name="panel-top" size={24} /><div><h3>A window that works your way.</h3><p>Resize Caret and keep that size. Keep it open while switching apps, or dismiss it when you click outside. Your global shortcut hides the focused window or brings Caret forward. Escape dismisses it.</p></div></aside>
  </div></section>;
}
Object.assign(window, { ProductShot, EverydayFeatures });