/* Penrose homepage — atomic components + sections (part 1)
 * Load order: this file, then penrose-sections.jsx, then the main inline app script.
 */

const { useState, useEffect, useRef } = React;
const PENROSE_BOOKING_URL = 'https://calendar.app.google/xFdbQsvUw5x5eVS48';

// ---------- Atoms ----------------------------------------------------------

const PnLogo = ({ inverted = false }) => (
  <div className="pn-nav__logo" style={inverted ? { color: '#fff' } : null}>
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="2" strokeLinejoin="round">
      {/* Penrose-triangle inspired mark — three folded bars */}
      <path d="M16 4 L28 25 L4 25 Z" />
      <path d="M10 14 L20 14 L25 22 L7 22 Z" />
    </svg>
    Penrose
  </div>
);

const PnButton = ({ variant = 'primary', size, children, onClick, href, target, rel, style, ...rest }) => {
  const cls = ['el-btn', `el-btn--${variant}`];
  if (size) cls.push(`el-btn--${size}`);
  if (href) {
    const isExternalHref = /^https?:\/\//.test(href);
    const linkTarget = target !== undefined ? target : (isExternalHref ? '_blank' : undefined);
    const linkRel = rel !== undefined ? rel : (isExternalHref ? 'noopener noreferrer' : undefined);
    return (
      <a
        className={cls.join(' ')}
        href={href}
        target={linkTarget}
        rel={linkRel}
        onClick={onClick}
        style={style}
        {...rest}
      >
        {children}
      </a>
    );
  }
  return (
    <button className={cls.join(' ')} onClick={onClick} style={style} {...rest}>
      {children}
    </button>
  );
};

const PnOrb = ({ color, style, drift }) => (
  <div className={`pn-orb ${drift ? 'pn-orb--' + drift : ''}`} style={{
    background: `radial-gradient(circle, ${color} 0%, transparent 65%)`,
    ...style,
  }} />
);

// ---------- Top nav --------------------------------------------------------

const PnTopNav = ({ active, setActive }) => {
  const items = [
    { name: 'Product', href: 'index.html' },
    { name: 'Use cases', href: 'Use Cases.html' },
    { name: 'Pricing', href: 'Pricing.html' },
    { name: 'Journal', href: 'Journal.html' },
  ];
  return (
    <nav className="pn-nav" data-screen-label="Top nav">
      <a href="index.html" onClick={() => setActive?.('Product')}><PnLogo /></a>
      <div className="pn-nav__menu">
        {items.map(item => (
          <a key={item.name}
             href={item.href}
             className={active === item.name ? 'active' : ''}
             onClick={() => setActive?.(item.name)}>
            {item.name}
          </a>
        ))}
      </div>
      <div className="pn-nav__right">
        <a className="el-nav-link" style={{ cursor: 'pointer', fontSize: 14 }}>Sign in</a>
        <PnButton variant="outline" size="sm" href={PENROSE_BOOKING_URL}>Get Started</PnButton>
      </div>
    </nav>
  );
};

// ---------- Hero render preview (the editorial 9:12 card) -----------------

const HERO_VARIANTS = [
  {
    bg: 'linear-gradient(160deg, #2a4a3a 0%, #4a6b58 38%, #c8a584 100%)',
    caption: <>Before the leak <em>spreads.</em></>,
    tag: 'Hook · 0:03',
    brand: 'PG',
    brandName: 'Pioneer Plumbing',
    cta: 'Book today',
  },
  {
    bg: 'linear-gradient(170deg, #3a2a4a 0%, #6b4a78 45%, #e8b8c4 100%)',
    caption: <>A roof that <em>outlives</em> the mortgage.</>,
    tag: 'Hook · 0:01',
    brand: 'NR',
    brandName: 'Northstar Roofing',
    cta: 'Free estimate',
  },
  {
    bg: 'linear-gradient(180deg, #1c2a3a 0%, #4a5a78 50%, #a8c8e8 100%)',
    caption: <>Hiring 40 nurses <em>this</em> quarter.</>,
    tag: 'Hook · 0:02',
    brand: 'MV',
    brandName: 'Mercy Valley Health',
    cta: 'Apply now',
  },
  {
    bg: 'linear-gradient(150deg, #3a2a1c 0%, #785a3a 40%, #f4c5a8 100%)',
    caption: <>Two locations. <em>One</em> Saturday.</>,
    tag: 'Hook · 0:00',
    brand: 'OK',
    brandName: 'Oak & Kin BBQ',
    cta: 'Order now',
  },
];

const PnRenderCard = ({ variant, onPickVariant }) => {
  const v = HERO_VARIANTS[variant];
  return (
    <div className="pn-render-card">
      <div className="pn-render-card__head">
        <div className="pn-render-card__head-l">
          <div className="pn-render-card__brand">{v.brand}</div>
          <div className="pn-render-card__brief">
            <small>Brief</small>
            {v.brandName}
          </div>
        </div>
        <div className="pn-render-card__status">
          <span className="dot" />
          Pack in review
        </div>
      </div>

      <div className="pn-render-card__frame" style={{ background: v.bg }}>
        <div className="pn-render-card__frame-tag">
          <span className="rec" />
          {v.tag}
        </div>
        <div className="pn-render-card__frame-caption">{v.caption}</div>
        <div className="pn-render-card__frame-brand">
          <span className="mark">{v.brand}</span>
          {v.brandName}
        </div>
        <div className="pn-render-card__frame-cta">{v.cta} →</div>
        <div className="pn-render-card__progress" />
      </div>

      <div className="pn-render-card__variants">
        {HERO_VARIANTS.map((vv, i) => (
          <div
            key={i}
            className={`pn-variant ${i === variant ? 'active' : ''}`}
            style={{ background: vv.bg }}
            onClick={() => onPickVariant(i)}
            title={`Variant V${i + 1}`}
          >
            <div className="pn-variant__label">V{i + 1}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

// ---------- Hero ----------------------------------------------------------

const PnHero = ({ tweaks }) => {
  const [variant, setVariant] = useState(0);
  const palette = tweaks.palette || ['#c8b8e0', '#f4c5a8', '#a7e5d3'];
  const layout = tweaks.heroLayout || 'split';
  const headline = tweaks.heroHeadline || 'split:3 ready-to-run video ads for your client|delivered in 5 business days.';
  const [a, b] = headline.replace(/^(split|center):/, '').split('|');

  // Auto-rotate variant gently every 6s
  useEffect(() => {
    const id = setInterval(() => setVariant(v => (v + 1) % HERO_VARIANTS.length), 6000);
    return () => clearInterval(id);
  }, []);

  return (
    <section className={`pn-hero ${layout === 'center' ? 'pn-hero--centered' : ''}`} data-screen-label="Hero">
      <PnOrb color={palette[0]} drift="drift-1" style={{ width: 720, height: 720, top: -140, left: -160, opacity: 0.55 }} />
      <PnOrb color={palette[1]} drift="drift-2" style={{ width: 600, height: 600, top: 40, right: -120, opacity: 0.5 }} />
      <PnOrb color={palette[2]} drift="drift-3" style={{ width: 480, height: 480, bottom: -200, left: '32%', opacity: 0.42 }} />

      <div className="pn-hero__container">
        <div className="pn-hero__grid">
          <div>
            <div className="pn-hero__eyebrow">
              <span className="dot" />
              White-label video ad production for agencies and media buyers
            </div>
            <h1 className="pn-hero__title">
              {a}<br /><em>{b}</em>
            </h1>
            <p className="pn-hero__sub">
              We turn your brief into a polished paid-social video Campaign Pack using AI-assisted production and human creative review.
            </p>
            <div className="pn-hero__ctas">
              <PnButton variant="primary" size="lg" href={PENROSE_BOOKING_URL}>Get Started</PnButton>
              <PnButton variant="outline" size="lg" href="Pricing.html">View pricing</PnButton>
            </div>
            <div className="pn-hero__assure">
              <span>
                <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><polyline points="2.5,7 6,10.5 11.5,4" /></svg>
                One brief in
              </span>
              <span>
                <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><polyline points="2.5,7 6,10.5 11.5,4" /></svg>
                Three ready-to-run video ads out
              </span>
              <span>
                <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><polyline points="2.5,7 6,10.5 11.5,4" /></svg>
                5 business days
              </span>
            </div>
          </div>
          <div className="pn-hero__side">
            <PnRenderCard variant={variant} onPickVariant={setVariant} />
          </div>
        </div>
      </div>
    </section>
  );
};

// ---------- Proof strip ----------------------------------------------------

const PnProofStrip = () => (
  <div className="pn-proof" data-screen-label="Proof strip">
    <div className="pn-proof__inner">
      <div className="pn-proof__label">White-label video ad production for agencies and media buyers</div>
      <div className="pn-proof__logos">
        <span className="pn-proof__logo">One brief in</span>
        <span className="pn-proof__logo" style={{ fontFamily: 'var(--el-font-body)', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', fontSize: 14 }}>3 ads out</span>
        <span className="pn-proof__logo">5 business days</span>
        <span className="pn-proof__logo" style={{ fontFamily: 'var(--el-font-body)', fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', fontSize: 14 }}>Agency-ready</span>
        <span className="pn-proof__logo" style={{ fontStyle: 'italic' }}>Human-polished</span>
        <span className="pn-proof__logo" style={{ fontFamily: 'var(--el-font-body)', fontWeight: 500, fontSize: 16 }}>White-label delivery</span>
      </div>
    </div>
  </div>
);

Object.assign(window, {
  PnLogo, PnButton, PnOrb, PnTopNav, PnRenderCard, PnHero, PnProofStrip,
  HERO_VARIANTS, PENROSE_BOOKING_URL,
});