/* global React */
// Hero variants for portant.ai

const { useState, useEffect, useRef } = React;

// ─── Pipeline panel: live-feeling deal feed ────────────────────────────
const DEAL_DATA = [
  { name: "Acme Corp · Renewal", amount: "$48,000", stage: "Meeting booked", action: "Drafting follow-up + proposal", artifact: { type: "doc", title: "Renewal proposal · Acme Corp", meta: "Generated · 14 pages · 4 sections personalized" } },
  { name: "Northwind · Expansion", amount: "$112,500", stage: "Proposal sent", action: "Booked next-step call · Thu 3pm", artifact: { type: "task", title: "Discovery call with Sarah Chen", sub: "Northwind · prep brief attached", when: "Thu · 3:00pm" } },
  { name: "Initech · New deal", amount: "$24,000", stage: "Quote ready", action: "Quote built · awaiting approval", artifact: { type: "quote", title: "Quote Q-2841 · Initech", meta: "3 line items · $24,000 ARR" } },
  { name: "Globex · Mid-market", amount: "$68,200", stage: "Contract sent", action: "Sent for signature · 2 reps in CC", artifact: { type: "doc", title: "MSA + Order Form · Globex", meta: "Sent for signature · 4 hours ago" } },
  { name: "Soylent · Pilot", amount: "$9,800", stage: "Closed won", action: "Stage advanced · invoice queued", artifact: { type: "task", title: "Onboarding kickoff", sub: "Soylent · invoice generated", when: "Mon · 10:00am" } },
];

function PipelinePanel() {
  const [activeIdx, setActiveIdx] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setActiveIdx(i => (i + 1) % DEAL_DATA.length);
    }, 2400);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="pipeline-panel" role="img" aria-label="Live pipeline view">
      <div className="pipeline-panel-header">
        <div className="pipeline-panel-title">
          <span className="agent-dot" />
          <span>Pipeline · running</span>
        </div>
        <div className="pipeline-panel-meta">5 deals · 2 actions queued</div>
      </div>
      <div className="pipeline-deals">
        {DEAL_DATA.map((deal, i) => {
          const active = i === activeIdx;
          return (
            <div key={deal.name} className={`deal-row ${active ? 'is-active' : ''}`}>
              <div className="deal-name">
                {deal.name}
                <span className="deal-amount">{deal.amount}</span>
              </div>
              <div className="deal-stage-pill">
                <span className="pill-dot" />
                {deal.stage}
              </div>
              <div className="deal-action">
                <span className="agent-tag">Agent →</span>
                <span style={{overflow:'hidden', textOverflow:'ellipsis'}}>{deal.action}</span>
              </div>
              {active && (
                <div className="deal-artifact">
                  <div className="artifact-icon">
                    {deal.artifact.type === 'task' ? <CalendarIcon /> : <FileIcon />}
                  </div>
                  <div>
                    <div style={{fontSize:'0.875rem', fontWeight:500, letterSpacing:'-0.01em'}}>{deal.artifact.title}</div>
                    <div className="artifact-meta">{deal.artifact.meta || deal.artifact.sub}</div>
                  </div>
                  <div className="artifact-meta">{deal.artifact.when || 'Ready'}</div>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ─── Layered artifacts hero ───────────────────────────────────────────
function LayeredArtifacts() {
  return (
    <div style={{position:'relative', minHeight:'520px'}}>
      <div style={{position:'absolute', top:'2rem', right:'1rem', width:'85%', transform:'rotate(2deg)', zIndex:1}}>
        <ArtifactProposal />
      </div>
      <div style={{position:'absolute', top:'10rem', left:'1rem', width:'80%', transform:'rotate(-1.5deg)', zIndex:2}}>
        <ArtifactFollowup />
      </div>
      <div style={{position:'absolute', bottom:'0.5rem', right:'2rem', width:'70%', transform:'rotate(1deg)', zIndex:3}}>
        <TaskCardArtifact />
      </div>
    </div>
  );
}

// ─── Product split hero (follow-up + proposal + task) ──────────────────
function ProductSplit() {
  return (
    <div className="stack-md" style={{display:'flex', flexDirection:'column', gap:'0.75rem'}}>
      <ArtifactFollowup compact />
      <ArtifactProposal compact />
      <TaskCardArtifact />
    </div>
  );
}

// ─── Editorial hero (no product) ───────────────────────────────────────
function EditorialDecor() {
  return (
    <div style={{display:'grid', placeItems:'center', minHeight:'320px', position:'relative'}}>
      <div style={{
        width:'min(440px, 100%)',
        aspectRatio:'1',
        borderRadius:'999px',
        background:'radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 65%)',
        filter:'blur(40px)',
        position:'absolute'
      }} />
      <div style={{
        position:'relative',
        fontFamily:'var(--font-mono)',
        fontSize:'0.6875rem',
        letterSpacing:'0.18em',
        textTransform:'uppercase',
        color:'var(--page-fg-subtle)',
        textAlign:'center'
      }}>
        <div style={{fontFamily:'var(--font-sans)', fontSize:'4rem', fontWeight:300, color:'var(--page-fg)', letterSpacing:'-0.05em', lineHeight:0.9, marginBottom:'1rem'}}>
          1 hire<br/>
          <span style={{color:'var(--accent)', fontStyle:'italic'}}>infinite throughput</span>
        </div>
        Hired in 4 days · Productive on day one
      </div>
    </div>
  );
}

// ─── Artifact: follow-up email mockup ──────────────────────────────────
function ArtifactFollowup({ compact }) {
  return (
    <div className="artifact-doc" style={compact ? {padding:'1rem 1.125rem'} : null}>
      <div className="artifact-doc-header">
        <div>
          <div className="artifact-doc-title">Re: Discovery · Acme + Portant</div>
          <div className="artifact-doc-meta" style={{marginTop:'4px'}}>To: sarah@acmecorp.com · Drafted 11:42am</div>
        </div>
        <div className="artifact-doc-meta">Agent draft</div>
      </div>
      <div className="artifact-doc-body">
        Hi Sarah,<br/><br/>
        Thanks for the time today. Quick recap of what we covered: <em className="hl">your team's running 14 quote cycles a week</em>, and the 48-hour turnaround between meeting and proposal is the bottleneck. <br/><br/>
        I've put together a <em className="hl">14-page proposal</em> covering the three-tier setup we discussed, with the migration timeline scoped against your <em className="hl">Q3 renewal window</em>. Quote attached, sized for 60 reps.<br/><br/>
        Happy to walk through it Thursday at 3pm — sent a hold.<br/><br/>
        — Mark
      </div>
    </div>
  );
}

// ─── Artifact: proposal mockup ─────────────────────────────────────────
function ArtifactProposal({ compact }) {
  return (
    <div className="artifact-doc" style={compact ? {padding:'1rem 1.125rem'} : null}>
      <div className="artifact-doc-header">
        <div>
          <div className="artifact-doc-title">Proposal · Acme Corp</div>
          <div className="artifact-doc-meta" style={{marginTop:'4px'}}>Generated · 14 pages · merged from CRM</div>
        </div>
        <div className="artifact-doc-meta">Q3 renewal</div>
      </div>
      <div className="line-items">
        <div className="line"><span className="l-name">Platform · 60 seats</span><span className="l-amt">$36,000</span></div>
        <div className="line"><span className="l-name">Onboarding & migration</span><span className="l-amt">$8,400</span></div>
        <div className="line"><span className="l-name">Premium support</span><span className="l-amt">$3,600</span></div>
        <div className="total"><span className="t-name">Annual contract value</span><span className="t-amt">$48,000</span></div>
      </div>
    </div>
  );
}

// ─── Artifact: rep task card ───────────────────────────────────────────
function TaskCardArtifact() {
  return (
    <div className="task-card">
      <div className="task-icon"><PhoneIcon /></div>
      <div>
        <div className="task-title">Call Sarah Chen · Acme Corp</div>
        <div className="task-sub">Pricing pushback expected · brief attached</div>
      </div>
      <div className="task-when">Thu · 3:00pm</div>
    </div>
  );
}

// ─── Tiny inline icons ─────────────────────────────────────────────────
function FileIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
      <path d="M14 2v6h6"/>
    </svg>
  );
}
function CalendarIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="4" width="18" height="18" rx="2"/>
      <path d="M16 2v4M8 2v4M3 10h18"/>
    </svg>
  );
}
function PhoneIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.93.37 1.85.71 2.73a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.35-1.35a2 2 0 0 1 2.11-.45c.88.34 1.8.58 2.73.71A2 2 0 0 1 22 16.92z"/>
    </svg>
  );
}

Object.assign(window, { PipelinePanel, LayeredArtifacts, ProductSplit, EditorialDecor, ArtifactFollowup, ArtifactProposal, TaskCardArtifact, FileIcon, CalendarIcon, PhoneIcon });