// Shared components, icons, and style objects for all variations
const Logo = () => (
  <svg width="28" height="28" viewBox="0 0 32 32" fill="none">
    <circle cx="16" cy="16" r="15" stroke="currentColor" strokeWidth="1.5"/>
    <path d="M16 6c0 4-2 6-6 6 4 0 6 2 6 6 0-4 2-6 6-6-4 0-6-2-6-6z" fill="currentColor"/>
    <circle cx="16" cy="16" r="2" fill="#fff"/>
  </svg>
);

const Stars = ({ value = 5, size = 14 }) => (
  <span className="stars" style={{ display: 'inline-flex', gap: 2 }}>
    {[...Array(5)].map((_, i) => (
      <svg key={i} width={size} height={size} viewBox="0 0 24 24" fill={i < value ? '#c9a36a' : '#e8e4dd'}>
        <path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z"/>
      </svg>
    ))}
  </span>
);

const IconSearch = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>;
const IconUser = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></svg>;
const IconBag = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M5 8h14l-1 12H6z"/><path d="M9 8a3 3 0 0 1 6 0"/></svg>;
const IconHeart = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 11c0 5.5-7 10-7 10z"/></svg>;
const IconTruck = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="2" y="6" width="13" height="11" rx="1"/><path d="M15 9h4l3 4v4h-7"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg>;
const IconShield = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6z"/><path d="m9 12 2 2 4-4"/></svg>;
const IconLock = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="4" y="11" width="16" height="10" rx="1"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>;
const IconCheck = ({ color = 'currentColor' }) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2"><path d="m5 12 4 4 10-10"/></svg>;
const IconX = ({ color = '#c64949' }) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2"><path d="m6 6 12 12M18 6 6 18"/></svg>;
const IconMenu = () => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 7h18M3 12h18M3 17h18"/></svg>;
const IconChevron = ({ open }) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" style={{ transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .2s' }}><path d="m6 9 6 6 6-6"/></svg>;

const Highlight = ({ icon, title, sub }) => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 8, padding: '24px 20px', borderRight: '1px solid var(--line)' }}>
    <span style={{ fontFamily: 'var(--font-display)', fontSize: 28, color: 'var(--accent)' }}>{icon}</span>
    <div style={{ fontWeight: 600, fontSize: 15 }}>{title}</div>
    <div style={{ color: 'var(--ink-3)', fontSize: 13 }}>{sub}</div>
  </div>
);

const ShipRow = ({ icon, title, sub }) => (
  <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start', padding: '14px 0', borderBottom: '1px solid var(--line-2)' }}>
    <div style={{ color: 'var(--accent-2)', flexShrink: 0, marginTop: 2 }}>{icon}</div>
    <div>
      <div style={{ fontWeight: 600, fontSize: 14 }}>{title}</div>
      <div style={{ color: 'var(--ink-3)', fontSize: 13 }}>{sub}</div>
    </div>
  </div>
);

const FeatureCard = ({ img, kicker, title, desc, reverse }) => (
  <div style={{ display: 'flex', gap: 0, alignItems: 'stretch', flexDirection: reverse ? 'row-reverse' : 'row', borderTop: '1px solid var(--line)' }}>
    <div style={{ flex: 1, background: 'var(--bg-cream)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0, minHeight: 480 }}>
      <img src={img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
    </div>
    <div style={{ flex: 1, padding: '80px 80px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
      <span className="kicker">{kicker}</span>
      <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 40, fontWeight: 500, lineHeight: 1.1, marginTop: 12, marginBottom: 18, letterSpacing: '-0.02em' }}>{title}</h3>
      <p style={{ color: 'var(--ink-3)', fontSize: 16, lineHeight: 1.6, maxWidth: 380 }}>{desc}</p>
    </div>
  </div>
);

const DetailItem = ({ n, title, desc }) => (
  <div style={{ padding: '32px 0', borderTop: '1px solid var(--line)' }}>
    <div style={{ fontFamily: 'var(--font-display)', fontSize: 14, color: 'var(--accent)', letterSpacing: '0.1em' }}>{n}</div>
    <div style={{ fontWeight: 600, fontSize: 18, marginTop: 10, marginBottom: 6 }}>{title}</div>
    <div style={{ color: 'var(--ink-3)', fontSize: 14 }}>{desc}</div>
  </div>
);

const CompareRow = ({ label, us, them }) => (
  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr 1.4fr', borderTop: '1px solid var(--line-2)', alignItems: 'center' }}>
    <div style={{ padding: '20px 24px', fontWeight: 500, color: 'var(--ink-3)', fontSize: 13, textTransform: 'uppercase', letterSpacing: '0.08em' }}>{label}</div>
    <div style={{ padding: '20px 24px', display: 'flex', alignItems: 'center', gap: 10, background: '#faf8f4' }}>
      <IconCheck color="#2d7a4f" /><span style={{ fontWeight: 500 }}>{us}</span>
    </div>
    <div style={{ padding: '20px 24px', display: 'flex', alignItems: 'center', gap: 10 }}>
      <IconX /><span style={{ color: 'var(--ink-3)' }}>{them}</span>
    </div>
  </div>
);

const SpecRow = ({ k, v }) => (
  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', padding: '16px 0', borderTop: '1px solid var(--line-2)', fontSize: 14 }}>
    <div style={{ color: 'var(--ink-3)' }}>{k}</div>
    <div style={{ fontWeight: 500 }}>{v}</div>
  </div>
);

const Review = ({ name, date, text, verified }) => (
  <div style={{ padding: 28, border: '1px solid var(--line)', borderRadius: 14, background: '#fff' }}>
    <Stars value={5} />
    <p style={{ marginTop: 14, fontSize: 15, lineHeight: 1.6, color: 'var(--ink-2)' }}>"{text}"</p>
    <div style={{ marginTop: 18, display: 'flex', alignItems: 'center', gap: 10 }}>
      <div style={{ width: 36, height: 36, borderRadius: 999, background: 'var(--bg-cream)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 600, fontSize: 13 }}>{name[0]}</div>
      <div>
        <div style={{ fontWeight: 600, fontSize: 13 }}>{name}{verified && <span style={{ marginLeft: 8, color: 'var(--green)', fontSize: 11 }}>✓ Compra verificada</span>}</div>
        <div style={{ color: 'var(--ink-4)', fontSize: 12 }}>{date}</div>
      </div>
    </div>
  </div>
);

const FaqItem = ({ q, a, open: defaultOpen }) => {
  const [open, setOpen] = React.useState(defaultOpen || false);
  return (
    <div style={{ borderTop: '1px solid var(--line)' }}>
      <button onClick={() => setOpen(!open)} style={{ width: '100%', padding: '24px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', textAlign: 'left', fontWeight: 500, fontSize: 16 }}>
        {q}<IconChevron open={open} />
      </button>
      {open && <div style={{ paddingBottom: 24, color: 'var(--ink-3)', fontSize: 14, lineHeight: 1.6, maxWidth: 600 }}>{a}</div>}
    </div>
  );
};

const FooterLink = ({ children }) => <div style={{ color: 'var(--ink-3)', fontSize: 13, padding: '4px 0' }}>{children}</div>;
const PayBadge = ({ children }) => <span style={{ fontSize: 11, padding: '4px 8px', background: 'var(--bg-cream)', borderRadius: 4, fontWeight: 500 }}>{children}</span>;

// ============= STYLES =============
const styles = {
  v1: {
    topbar: { background: '#1a1a1a', color: '#fff' },
    topbarInner: { padding: '10px 60px', textAlign: 'center' },
    bar: { fontSize: 12, letterSpacing: '0.05em' },
    nav: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '20px 60px', borderBottom: '1px solid var(--line)' },
    navLogo: { display: 'flex', alignItems: 'center', gap: 10 },
    navLinks: { display: 'flex', gap: 32, fontSize: 14, color: 'var(--ink-2)' },
    navIcons: { display: 'flex', gap: 18, color: 'var(--ink)' },
    crumb: { padding: '20px 60px', fontSize: 12, color: 'var(--ink-3)', letterSpacing: '0.04em' },
    hero: { display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 60, padding: '20px 60px 80px' },
    heroGallery: { display: 'flex', gap: 20 },
    heroMain: { flex: 1, background: 'var(--bg-cream)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', aspectRatio: '4/5' },
    heroThumbs: { display: 'flex', flexDirection: 'column', gap: 12, width: 90 },
    thumb: { width: 90, height: 90, background: 'var(--bg-cream)', borderRadius: 12, overflow: 'hidden', cursor: 'pointer', border: '2px solid transparent' },
    thumbActive: { border: '2px solid var(--ink)' },
    heroInfo: { display: 'flex', flexDirection: 'column' },
    h1: { fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 500, lineHeight: 1.1, letterSpacing: '-0.02em', marginTop: 14, marginBottom: 18 },
    rating: { display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 },
    lead: { color: 'var(--ink-3)', fontSize: 16, lineHeight: 1.6, marginBottom: 32 },
    priceBlock: { padding: '24px 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' },
    priceOld: { color: 'var(--ink-4)', fontSize: 16, textDecoration: 'line-through' },
    priceNew: { fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 500, letterSpacing: '-0.02em' },
    priceBadge: { background: '#1a1a1a', color: '#fff', fontSize: 12, padding: '4px 8px', borderRadius: 4, fontWeight: 600 },
    priceMeta: { fontSize: 13, color: 'var(--ink-3)', marginTop: 8 },
    colorRow: { display: 'flex', gap: 32, marginTop: 28 },
    swatch: { width: 36, height: 36, borderRadius: 999, border: '1px solid var(--line)', cursor: 'pointer' },
    swatchActive: { boxShadow: '0 0 0 2px var(--ink)', borderColor: '#fff' },
    qtyBox: { display: 'inline-flex', alignItems: 'center', border: '1px solid var(--line)', borderRadius: 999, padding: '4px 8px', gap: 16 },
    shipBox: { marginTop: 32, padding: '8px 0' },
    highlights: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' },
    story: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, padding: '120px 60px', alignItems: 'center' },
    storyHead: {},
    h2: { fontFamily: 'var(--font-display)', fontSize: 56, fontWeight: 500, lineHeight: 1.05, letterSpacing: '-0.02em', marginTop: 16 },
    bigLead: { color: 'var(--ink-3)', fontSize: 18, lineHeight: 1.6, maxWidth: 480, marginTop: 24 },
    storyImg: { background: 'var(--bg-cream)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', aspectRatio: '4/5' },
    features: {},
    detalhes: { padding: '120px 60px' },
    detalhesHead: { marginBottom: 60 },
    detalhesGrid: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 },
    compare: { padding: '120px 60px', background: 'var(--bg-soft)' },
    compareHead: { marginBottom: 60 },
    compareTable: { background: '#fff', borderRadius: 'var(--radius)', overflow: 'hidden', border: '1px solid var(--line)' },
    compareRow: { display: 'grid', gridTemplateColumns: '1fr 1.4fr 1.4fr', alignItems: 'center', padding: '20px 0' },
    compareCell: { padding: '20px 24px' },
    compareUs: { background: '#faf8f4' },
    specs: { display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, padding: '120px 60px' },
    specsCol: {},
    specsTable: {},
    reviews: { padding: '120px 60px', background: 'var(--bg-soft)' },
    reviewsHead: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 60 },
    reviewsScore: { textAlign: 'right' },
    reviewsGrid: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 },
    faq: { display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, padding: '120px 60px' },
    faqCol: {},
    faqList: {},
    finalCta: { background: '#1a1a1a', padding: '120px 60px' },
    finalCtaInner: { maxWidth: 800, textAlign: 'left' },
    ctaWhite: { background: '#fff', color: '#1a1a1a', padding: '20px 36px', borderRadius: 999, fontWeight: 600, fontSize: 16, cursor: 'pointer' },
    footer: { padding: '60px 60px 30px', background: '#0d0d0d', color: '#fff' },
    footerCols: { display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 40, paddingBottom: 40, borderBottom: '1px solid #2a2a2a' },
    footerBottom: { display: 'flex', justifyContent: 'space-between', paddingTop: 24, color: 'var(--ink-4)', fontSize: 12 }
  }
};

Object.assign(window, {
  Logo, Stars, IconSearch, IconUser, IconBag, IconHeart, IconTruck, IconShield, IconLock,
  IconCheck, IconX, IconMenu, IconChevron, Highlight, ShipRow, FeatureCard, DetailItem,
  CompareRow, SpecRow, Review, FaqItem, FooterLink, PayBadge, styles
});