// Products.jsx — multi-product showcase
const ProductFeature = ({ icon, label }) => (
  <li className="cc-pfeat">
    <span className="cc-pfeat-icon"><Icon name={icon} size={14} /></span>
    {label}
  </li>
);

const ProductCard = ({
  index,
  status,
  statusTone,
  name,
  tagline,
  description,
  features,
  cta,
  visual,
  reverse = false,
}) => (
  <article className={`cc-product ${reverse ? 'cc-product-reverse' : ''}`}>
    <div className="cc-product-visual">{visual}</div>
    <div className="cc-product-body">
      <div className="cc-product-meta">
        <span className="cc-product-index">{index}</span>
        <span className={`cc-product-status cc-status-${statusTone}`}>
          <span className="cc-status-dot" />
          {status}
        </span>
      </div>
      <h3 className="cc-product-name">{name}</h3>
      <p className="cc-product-tagline">{tagline}</p>
      <p className="cc-product-desc">{description}</p>
      <ul className="cc-product-features">
        {features.map((f) => <ProductFeature key={f.label} {...f} />)}
      </ul>
      <div className="cc-product-cta">{cta}</div>
    </div>
  </article>
);

// VCut 6-phase carousel
const VCUT_PHASES = [
  { src: 'assets/vcut-01-home.png', label: 'Home', sub: 'Build short films with AI' },
  { src: 'assets/vcut-02-moodboard.png', label: 'Moodboard', sub: 'Premise · vibe · references' },
  { src: 'assets/vcut-03-characters.png', label: 'Characters & Locations', sub: 'Cast · voice · sheets' },
  { src: 'assets/vcut-04-previs.png', label: 'Pre-vis', sub: 'Scene blocking, 2D / 3D' },
  { src: 'assets/vcut-05-sprint.png', label: 'Generation Sprint', sub: 'Seedance 2.0 takes' },
  { src: 'assets/vcut-06-editor.png', label: 'Edit', sub: 'AI co-pilot timeline' },
];

const VCutCarousel = () => {
  const [i, setI] = React.useState(0);
  const total = VCUT_PHASES.length;
  const go = (delta) => setI((p) => (p + delta + total) % total);
  const phase = VCUT_PHASES[i];
  return (
    <div className="cc-vcut-carousel">
      <div className="cc-orbit" aria-hidden="true" />
      <div className="cc-app-glow" aria-hidden="true" />
      <div className="cc-desktop-frame">
        <div className="cc-desktop-chrome">
          <span className="cc-tl" /><span className="cc-tl" /><span className="cc-tl" />
          <span className="cc-desktop-title">VCut · {phase.label}</span>
        </div>
        <div className="cc-desktop-body">
          {VCUT_PHASES.map((p, idx) => (
            <img
              key={p.src}
              src={p.src}
              alt={`VCut · ${p.label}: ${p.sub}`}
              className={`cc-desktop-screenshot ${idx === i ? 'is-active' : ''}`}
              loading="lazy"
            />
          ))}
        </div>
      </div>
      <div className="cc-vcut-controls">
        <button className="cc-vcut-arrow" onClick={() => go(-1)} aria-label="Previous phase">
          <Icon name="arrow" size={14} />
        </button>
        <div className="cc-vcut-phase-info">
          <span className="cc-vcut-phase-num">{String(i + 1).padStart(2, '0')} / {String(total).padStart(2, '0')}</span>
          <span className="cc-vcut-phase-label">{phase.label}</span>
          <span className="cc-vcut-phase-sub">{phase.sub}</span>
        </div>
        <button className="cc-vcut-arrow" onClick={() => go(1)} aria-label="Next phase">
          <Icon name="arrow" size={14} />
        </button>
      </div>
      <div className="cc-vcut-dots">
        {VCUT_PHASES.map((p, idx) => (
          <button
            key={p.src}
            className={`cc-vcut-dot ${idx === i ? 'is-active' : ''}`}
            onClick={() => setI(idx)}
            aria-label={`Go to ${p.label}`}
          />
        ))}
      </div>
    </div>
  );
};

const Products = () => (
  <section className="cc-products" id="products">
    <SectionHeader eyebrow="Our Products" title="A growing portfolio of thoughtful software." />

    <div className="cc-product-list">
      <ProductCard
        index="01"
        status="Live on the App Store"
        statusTone="live"
        name="StudioShots"
        tagline="AI-powered photo magic for families."
        description="Transforms your child's photo into magical themed portraits like superheroes, astronauts, safari explorers. Powered by Gemini, designed with love, built with children's privacy at the core."
        features={[
          { icon: 'palette_simple', label: '20+ themes' },
          { icon: 'shield', label: 'Privacy-first' },
          { icon: 'zap', label: 'Instant results' },
          { icon: 'users', label: 'Family-safe' },
        ]}
        cta={<AppStoreButton href="https://apps.apple.com/app/id6759466531" />}
        visual={
          <>
            <div className="cc-orbit" aria-hidden="true" />
            <div className="cc-app-glow" aria-hidden="true" />
            <div className="cc-phone-frame">
              <img src="assets/app-screenshot.png" alt="StudioShots app screenshot" className="cc-phone-screenshot" loading="lazy" />
            </div>
          </>
        }
      />

      <ProductCard
        reverse
        index="02"
        status="In Development · Private Beta"
        statusTone="dev"
        name="VCut"
        tagline="Build short films with AI."
        description={
          <>
            An AI-native short-film studio. One click seeds your moodboard, cast, locations, and scenes. Then <strong>Seedance 2.0</strong> generates every shot. You direct; the AI produces. Five phases: Moodboard, Characters &amp; Locations, Pre-vis, Generation Sprint, Edit.
          </>
        }
        features={[
          { icon: 'palette_simple', label: 'Moodboard & vibe' },
          { icon: 'users', label: 'Character sheets' },
          { icon: 'zap', label: 'Seedance 2.0' },
          { icon: 'shield', label: 'Local-first desktop' },
        ]}
        cta={
          <a href="#contact" className="cc-btn cc-btn--ghost">
            Request beta access
            <Icon name="arrow" size={16} />
          </a>
        }
        visual={<VCutCarousel />}
      />
    </div>
  </section>
);
window.Products = Products;