const { useState } = React;

// ============== ICONS ==============
const IcoArrow = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
);
const IcoArrowDown = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="17" y1="7" x2="7" y2="17"/><polyline points="17 17 7 17 7 7"/></svg>
);
const IcoMenu = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="4" y1="8" x2="20" y2="8"/><line x1="4" y1="16" x2="20" y2="16"/></svg>
);
const IcoSearch = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="7"/><line x1="20" y1="20" x2="16.65" y2="16.65"/></svg>
);
const IcoUser = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
);
const IcoStar = ({ size = 12 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M12 2 L13.5 9.5 L21 11 L13.5 12.5 L12 22 L10.5 12.5 L3 11 L10.5 9.5 Z"/></svg>
);
const IcoBolt = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M13 2 L4 14 L11 14 L10 22 L20 9 L13 9 Z"/></svg>
);
const IcoFlag = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 22V4"/><path d="M4 4h13l-2 4 2 4H4"/></svg>
);
const IcoR = () => <span style={{transform: 'translateY(-1px) skewX(-6deg)', display:'inline-block'}}>R</span>;

// ============== HERO ==============
function Hero({ audience, setAudience }) {
  return (
    <section className="hero">
      <img src="uploads/herosection.png" alt="Filmmaker Background" className="hero-bg-img" />
      
      <div className="hero-inner">
        {/* NAV */}
        <nav className="nav">
          <div className="nav-left">
            <a className="logo" href="#">
              <span className="logo-mark"><IcoR /></span>
              REELDEAL
            </a>
            <button className="menu-btn" aria-label="menu"><IcoMenu /></button>
          </div>
          <div className="nav-links">
            <a href="#" className="active">Briefs</a>
            <a href="#">Creators</a>
            <a href="#">Cases</a>
            <a href="#">Pricing</a>
          </div>
          <div className="nav-right">
            <button className="nav-icon" aria-label="search"><IcoSearch /></button>
            <button className="nav-icon" aria-label="login"><IcoUser /></button>
          </div>
        </nav>

        {/* HERO BODY */}
        <div className="hero-body">
          <div className="hero-left">
            <div>
              <div className="hero-eyebrow">
                BRIEFS IN.<br />REELS OUT.<span className="sl">/</span>
              </div>
              <div className="hero-eyebrow-sub">
                A two-sided marketplace where brands post, creators ship, and deals close — async, on-deadline, no agency in the middle.
              </div>
            </div>

            <div style={{ margin: '32px 0' }}>
              <div className="audience-toggle" role="tablist">
                <button className={audience === 'brands' ? 'active' : ''} onClick={() => setAudience('brands')}>For Brands</button>
                <button className={audience === 'creators' ? 'active' : ''} onClick={() => setAudience('creators')}>For Creators</button>
              </div>
            </div>

            <div className="hero-cards">
              <div className="hero-card stat">
                <div className="h-icon"><IcoBolt /></div>
                <div className="h-eyebrow">Briefs filled</div>
                <div className="h-stat">85%</div>
                <div className="h-foot">in &lt;72h, no agency</div>
              </div>
              <div className="hero-card copy">
                <div className="h-icon"><IcoFlag /></div>
                <div className="h-title">{audience === 'brands' ? 'Brief, get reel' : 'Reel, get paid'}</div>
                <div className="h-body">
                  {audience === 'brands'
                    ? 'Budget, deadline, vibe — posted in 3 fields. Creators bid, you pick, they ship.'
                    : 'Set your rate, your niche, your turn-around. Briefs route to you. Cash settles in 48h.'}
                </div>
              </div>
            </div>
          </div>

          <div className="hero-right">
            <div style={{ display: 'flex', flexDirection: 'column', height: '100%', justifyContent: 'space-between', alignItems: 'flex-end' }}>
              <div>
                <h1 className="hero-title display">
                  {audience === 'brands' ? (
                    <>POST A BRIEF.<br/>SHIP A REEL.<br/><span className="accent-mark">.</span></>
                  ) : (
                    <>CLAIM THE BRIEF.<br/>CASH THE DEAL.<br/><span className="accent-mark">.</span></>
                  )}
                </h1>
                <div className="hero-sub" style={{ marginLeft: 'auto' }}>
                  {audience === 'brands' ? (
                    <>We craft <b>bold briefs</b> that get shot fast. From budget to deadline — pay only when the reel lands. <b>Approve, publish, repeat.</b></>
                  ) : (
                    <>Browse <b>open briefs</b> from brands you'd actually shoot for. Claim, film, submit. Cash hits your account within <b>48h of approval.</b></>
                  )}
                </div>
                <div className="hero-cta-wrap" style={{ justifyContent: 'flex-end', marginTop: 24 }}>
                  <button className="hero-cta">
                    {audience === 'brands' ? 'Post a brief' : 'Claim a brief'}
                  </button>
                  <div className="hero-cta-circle">
                    <IcoArrow size={16} />
                  </div>
                </div>
              </div>

              <div className="hero-tags" style={{ marginTop: 'auto', paddingTop: 40 }}>
                <span className="tag">UGC ADS</span>
                <span className="tag">UNBOXING</span>
                <span className="tag featured"><span className="star"><IcoStar/></span> SHORT-FORM</span>
                <span className="tag">TUTORIALS</span>
                <span className="tag">TESTIMONIALS</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============== EDITORIAL SECTIONS ==============
function SectionLatest() {
  return (
    <section className="cream">
      <div className="projects-container">
        <div className="projects-left">
          <div className="star-mark"><IcoStar size={28}/></div>
          <div className="projects-meta-title">
            OUR<br/>LATEST<br/>PROJECTS<br/>(124)
          </div>
        </div>
        
        <div className="projects-right">
          <div className="projects-header-wrap">
            <h2 className="h2">
              REELDEAL CONNECTS<br/>
              BRANDS <span className="inline-sphere" style={{ display: 'inline-block', width: '56px', height: '56px', borderRadius: '50%', background: 'radial-gradient(circle at 35% 35%, var(--accent) 0%, var(--blood) 70%, #000 100%)', verticalAlign: 'middle', margin: '0 8px', transform: 'translateY(-6px)' }}></span> WITH<br/>
              <span className="serif-italic">creators who actually</span><br/>
              SHIP — ON DEADLINE
            </h2>
            <div className="projects-right-meta">SHIP<br/>THE BRIEF</div>
          </div>
          
          <p className="projects-lead">
            Reeldeal routes briefs to creators who can shoot them. Budget, deadline,
            deliverable — locked at post. Approval gates payout. No agency markup,
            no lost weeks. Since launch we've cleared over <b>$2.4M</b> in creator payouts.
          </p>

          <div className="reels-grid">
            <ReelCard
              handle="@maya.shoots"
              brand="GLOSSER&nbsp;BEAUTY"
              title="60s mascara test, soft-glow grade"
              budget="$420"
              duration="0:58"
              views="318K"
              imgUrl="uploads/secction1.png"
            />
            <ReelCard
              handle="@rico.frames"
              brand="NORTHFEED&nbsp;ATHLETIC"
              title="Sunrise run hook — cold open"
              budget="$680"
              duration="0:42"
              views="512K"
              imgUrl="uploads/section2.png"
            />
            <ReelCard
              handle="@sade.cuts"
              brand="OURO&nbsp;COFFEE"
              title="Pour-over kitchen ASMR, 3 cuts"
              budget="$310"
              duration="0:36"
              views="201K"
              imgUrl="uploads/section3.png"
            />
          </div>
        </div>
      </div>
    </section>
  );
}

function ReelCard({ handle, brand, title, budget, duration, views, imgUrl }) {
  return (
    <div className="reel">
      <img src={imgUrl} className="reel-img" alt={title} />
      <div className="reel-chrome">
        <div className="reel-top">
          <span className="reel-handle">{handle}</span>
          <span className="reel-budget">{budget}</span>
        </div>
        <div className="reel-bottom">
          <div className="reel-brand">{brand}</div>
          <div className="reel-title">{title}</div>
          <div className="reel-meta">
            <span>{duration}</span>
            <span className="dot"></span>
            <span>{views} views</span>
            <span className="dot"></span>
            <span>APPROVED</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function SectionFlow({ audience }) {
  const cards = [
    { img: 'uploads/slider1.png', step: '01', lift: false, highlight: audience === 'brands' },
    { img: 'uploads/slider2.png', step: '02', lift: true, highlight: audience === 'creators' },
    { img: 'uploads/slider4.png', step: '03', lift: false, highlight: audience === 'creators' },
    { img: 'uploads/slider5.png', step: '04', lift: false, highlight: audience === 'brands' || audience === 'creators' }
  ];

  return (
    <section className="cream" style={{paddingTop: 40}}>
      <div className="section-head">
        <div></div>
        <h2 className="h2" style={{textAlign: 'center'}}>
          EVERYTHING <span className="ghost">YOU NEED</span><br/>
          TO {audience === 'brands' ? 'SHIP CONTENT' : 'GET SHOT, GET PAID'}
        </h2>
        <div></div>
      </div>
      <div className="section-body">
        <div></div>
        <p className="lead">
          {audience === 'brands'
            ? 'Reeldeal handles brief routing, creator vetting, escrow, approvals, and reporting — built so your marketing team ships short-form weekly, not quarterly.'
            : 'Reeldeal hands you a steady feed of paid briefs, escrowed budgets, instant payouts, and reputation that travels — built so you can keep shooting and stop chasing invoices.'}
        </p>
        <div></div>
      </div>

      <div className="flow">
        {cards.map((c, i) => (
          <div key={i} className={`flow-card ${c.lift ? 'lift' : ''}`} style={{
            border: c.highlight ? '2px solid var(--accent)' : '1px solid rgba(0,0,0,0.06)',
            boxShadow: c.highlight ? '0 10px 30px -5px rgba(255, 59, 46, 0.25)' : 'none'
          }}>
            <img src={c.img} className="flow-card-img" alt={`Step ${c.step}`} />
          </div>
        ))}
      </div>
    </section>
  );
}

function SectionClose() {
  return (
    <section className="cream" style={{paddingTop: 40}}>
      <div className="section-head">
        <div></div>
        <h2 className="h2" style={{textAlign: 'center'}}>
          WE TURN BRIEFS<br/>
          INTO BREAKOUT <span className="inline-tag">REELS</span> — FAST<br/>
          <span className="serif-italic">from post to payout —</span><br/>
          DEAL CLOSED IN DAYS
        </h2>
        <div></div>
      </div>

      <div className="closing-grid">
        <div className="closing-col">
          <div className="cclip">
            <img src="uploads/closing1.png" className="cclip-img closing-col-left-img" alt="Creator Portrait" />
          </div>
          <div className="closing-text-wrap">
            <span className="star"><IcoStar size={18}/></span>
            <span>We route <b>real briefs</b> to creators who'd actually shoot them. Budget escrowed, deadline locked, deal closed in days — not quarters.</span>
          </div>
        </div>
        
        <div className="closing-col-large">
          <div className="cclip">
            <img src="uploads/closing2.png" className="cclip-img" alt="Explore Creators" />
          </div>
        </div>

        <div className="closing-col">
          <div className="cclip">
            <img src="uploads/closing3.png" className="cclip-img" alt="Creator Portrait 2" />
          </div>
          <div className="closing-btn-wrap">
            <button className="explore-btn-pill">EXPLORE NOW <IcoArrow size={12}/></button>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============== MARQUEE ==============
function Marquee() {
  const items = ['BRIEFS IN', 'REELS OUT', 'NO AGENCY', 'PAY ON APPROVAL', '48H PAYOUTS', 'BRIEFS IN', 'REELS OUT', 'NO AGENCY', 'PAY ON APPROVAL', '48H PAYOUTS'];
  return (
    <div className="marquee">
      <div className="marquee-track">
        <span>
          {items.map((t, i) => <React.Fragment key={i}>{t}<span className="star"><IcoStar size={28}/></span></React.Fragment>)}
        </span>
        <span>
          {items.map((t, i) => <React.Fragment key={'b'+i}>{t}<span className="star"><IcoStar size={28}/></span></React.Fragment>)}
        </span>
      </div>
    </div>
  );
}

// ============== FOOTER ==============
function Footer() {
  return (
    <footer className="footer">
      <div className="foot-grid">
        <div>
          <div className="foot-title">
            CLOSE THE<br/>
            <span className="accent">DEAL.</span>
          </div>
          <div style={{marginTop: 24, fontSize: 13, color:'rgba(255,255,255,0.6)', lineHeight: 1.6, maxWidth: 360}}>
            The fastest way for brands and creators to make short-form happen.
            Briefs in. Reels out. Cash settled.
          </div>
        </div>
        <div>
          <div className="foot-col-head">For Brands</div>
          <a className="foot-link" href="#">Post a brief</a>
          <a className="foot-link" href="#">Pricing</a>
          <a className="foot-link" href="#">Case studies</a>
          <a className="foot-link" href="#">API</a>
        </div>
        <div>
          <div className="foot-col-head">For Creators</div>
          <a className="foot-link" href="#">Browse briefs</a>
          <a className="foot-link" href="#">Set rate card</a>
          <a className="foot-link" href="#">Payouts</a>
          <a className="foot-link" href="#">Creator academy</a>
        </div>
        <div>
          <div className="foot-col-head">Company</div>
          <a className="foot-link" href="#">About</a>
          <a className="foot-link" href="#">Careers</a>
          <a className="foot-link" href="#">Press</a>
          <a className="foot-link" href="#">Contact</a>
        </div>
      </div>
      <div className="foot-bottom">
        <span>© 2026 REELDEAL</span>
        <span>BRIEFS IN. REELS OUT.</span>
        <span>v1.4 · MADE IN BROOKLYN</span>
      </div>
    </footer>
  );
}

// ============== APP ==============
function App() {
  const [audience, setAudience] = useState('brands');

  return (
    <>
      <div className="page">
        <div className="film-ruler"></div>
        <Hero audience={audience} setAudience={setAudience} />
      </div>
      <SectionLatest />
      <SectionFlow audience={audience} />
      <SectionClose />
      <Marquee />
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
