/* ===== ShipCrew, sections (React + Babel) ===== */
const { useState, useEffect, useRef } = React;

/* ---------- icons ---------- */
const ArrowUR = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17L17 7"/><path d="M7 7h10v10"/></svg>
);
const ArrowR = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="M13 5l7 7-7 7"/></svg>
);
const Check = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
);
const Plus = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
);

/* ---------- Nav ---------- */
function Nav() {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#" className="brand">
          <span className="brand-mark"><img src="assets/brand/Logo.svg" alt="ShipCrew"/></span>
          <span className="brand-name"><b>ShipCrew</b><span style={{color:'var(--accent)'}}>.</span></span>
        </a>
        <div className="nav-links">
          <a href="#work">Work</a>
          <a href="#process">Process</a>
          <a href="#testimonials">Clients</a>
          <a href="#pricing">Pricing</a>
          <a href="#faq">FAQ</a>
        </div>
        <a href="#cta" className="nav-cta">Book intro call <ArrowR size={14}/></a>
      </div>
    </nav>
  );
}

/* ---------- Hero ---------- */
function RotatingWord() {
  const words = ['investors', 'clients', 'businesses', 'people'];
  const [i, setI] = useState(0);
  const [w, setW] = useState(0);
  const measureRef = useRef(null);

  useEffect(() => {
    const id = setInterval(() => setI(v => (v + 1) % words.length), 2200);
    return () => clearInterval(id);
  }, []);

  // measure the active word and animate wrapper width to match
  useEffect(() => {
    const el = measureRef.current;
    if (!el) return;
    const measure = () => setW(el.getBoundingClientRect().width);
    measure();
    const ro = new ResizeObserver(measure);
    ro.observe(el);
    window.addEventListener('resize', measure);
    return () => { ro.disconnect(); window.removeEventListener('resize', measure); };
  }, [i]);

  return (
    <span className="rot-wrap" style={{ width: w ? `${w}px` : 'auto' }}>
      <span ref={measureRef} className="rot-measure serif" aria-hidden="true">{words[i]}</span>
      {words.map((word, idx) => (
        <span key={idx} className={`rot-word serif ${idx === i ? 'is-active' : ''}`}>{word}</span>
      ))}
    </span>
  );
}

function Hero() {
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero-bg-grid"></div>
      <div className="hero-bg-glow"></div>

      <div className="wrap hero-grid">
        <div>
          <h1 className="hero-title reveal in reveal-d1">
            Ship the product
            <br />
            <span className="hero-line-2"><RotatingWord /> believe in.</span>
            <br />
            <span className="dim">In 30 days.</span>
          </h1>

          <p className="hero-slogan reveal in reveal-d2">
            <s>We develop products.</s> <span className="serif">We build businesses.</span>
          </p>

          <p className="hero-sub reveal in reveal-d3">
            ShipCrew is a senior product studio for ambitious founders. We design, build and launch market ready MVPs whose teams have raised close to $1M and landed spots in top accelerators, all within 45 days of launch.
          </p>

          <div className="hero-cta-row reveal in reveal-d4">
            <a href="#cta" className="btn-primary">Book intro call <span className="arrow"><ArrowR size={16}/></span></a>
            <a href="#work" className="btn-ghost">See recent work <ArrowUR size={14}/></a>
          </div>
        </div>

        <div className="hero-3d">
          <div id="hero-3d" style={{position:'absolute', inset:0}} />
          <div className="hero-3d-ring"></div>
          <div className="hero-3d-label mono">// MVP.payload, v2.4.0</div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Marquee ---------- */
function Marquee() {
  const logos = [
    { name:'Provision AI',    file:'provisionai.png' },
    { name:'Voxstar',         file:'voxstar.png' },
    { name:'ContentPartner',  file:'contentpartner.png' },
    { name:'Edde',            file:'edde.png' },
    { name:'Leadkit',         file:'leadkit.png' },
    { name:'EnvokElements',   file:'envokelements.png' },
    { name:'Cleaveer',        file:'cleaveer.png' },
    { name:'Chikoo',          file:'chikoo.png' },
    { name:'Boilerbay',       file:'boilerbay.svg' },
  ];
  // duplicate twice for seamless loop
  const list = [...logos, ...logos];
  return (
    <section className="marquee-section">
      <div className="marquee-label">Trusted by founders building the next wave of software</div>
      <div className="marquee">
        <div className="marquee-track">
          {list.map((l, i) => <img key={i} src={`assets/companies/${l.file}`} alt={l.name} />)}
        </div>
        <div className="marquee-track" aria-hidden="true">
          {list.map((l, i) => <img key={i} src={`assets/companies/${l.file}`} alt="" />)}
        </div>
      </div>
    </section>
  );
}

/* ---------- KPI ---------- */
function Counter({ to, suffix = '', durationMs = 1400 }) {
  const [val, setVal] = useState(0);
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          const start = performance.now();
          const tick = (now) => {
            const t = Math.min(1, (now - start) / durationMs);
            const eased = 1 - Math.pow(1 - t, 3);
            setVal(Math.round(to * eased));
            if (t < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
          io.disconnect();
        }
      });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [to]);
  return <span ref={ref}>{val}{suffix}</span>;
}

function KPI() {
  return (
    <section className="kpi-section">
      <div className="wrap">
        <div className="kpi-grid">
          <div className="kpi reveal"><div className="v"><Counter to={30}/><span className="small"> days</span></div><div className="l">Idea → live product. Strict 30 day MVP cadence with daily updates.</div></div>
          <div className="kpi reveal reveal-d1"><div className="v"><Counter to={20}/>+</div><div className="l">Founders shipped. From solo builders to teams backed by top accelerators.</div></div>
          <div className="kpi reveal reveal-d2"><div className="v">~$<Counter to={1}/>M</div><div className="l">Raised by ShipCrew built products in the last 12 months.</div></div>
          <div className="kpi reveal reveal-d3"><div className="v"><Counter to={70}/>%</div><div className="l">Cheaper than a traditional agency engagement.</div></div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Process ---------- */
function Process() {
  const steps = [
    {
      n: '01 · DISCOVERY', roman: 'I',
      title: 'Strategic blueprint',
      desc: 'We pressure test your idea, map a 90 day growth path, and lock the tech blueprint. By day 3 you have a clear scope, stack and timeline.',
      anim: (
        <div className="bp">
          <div className="bp-row"></div>
          <div className="bp-row"></div>
          <div className="bp-row"></div>
          <div className="bp-row"></div>
          <div className="bp-row"></div>
        </div>
      )
    },
    {
      n: '02 · BUILD', roman: 'II',
      title: 'Senior only delivery',
      desc: 'Daily commits, weekly demos. The same team that shipped products to $10K MRR builds yours, no juniors, no offshoring, no surprises.',
      anim: (
        <div className="term">
          <div className="ln">$ git checkout -b feature/auth</div>
          <div className="ln">$ pnpm run build</div>
          <div className="ln">✓ build successful · 1.2s</div>
          <div className="ln">$ vercel deploy --prod</div>
          <div className="ln">✓ deployed → mvp.shipcrew.co<span className="cursor"></span></div>
        </div>
      )
    },
    {
      n: '03 · LAUNCH', roman: 'III',
      title: 'Market ready launch',
      desc: 'Go to market playbook, analytics, onboarding flows and 30 days of post launch support. Walk away owning every line of code.',
      anim: (
        <div className="rings">
          <div className="r"></div>
          <div className="r"></div>
          <div className="r"></div>
          <div className="core">LIVE</div>
        </div>
      )
    },
  ];
  return (
    <section className="section" id="process">
      <div className="wrap">
        <div className="section-head">
          <div className="lhs">
            <div className="section-tag">The Three Pillars</div>
            <h2 className="section-title">A studio engine, <span className="serif">tuned</span> for 30 day launches.</h2>
            <p className="section-sub">Discovery, build, launch. Three foundations that hold every ShipCrew engagement together.</p>
          </div>
        </div>

        <div className="process-grid">
          {steps.map((s, i) => (
            <div key={i} className={`pillar-column reveal reveal-d${i+1}`} style={{'--float-delay': `${i * 0.4}s`}}>
              <div className="proc-card">
                <div className="proc-num mono">{s.n}</div>
                <div className="proc-canvas">{s.anim}</div>
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
              </div>
              <div className="pillar-base" aria-hidden="true">
                <span className="pillar-roman serif">{s.roman}</span>
                <img src="assets/pillar.png" alt="" className="pillar-img" />
                <div className="pillar-floor"></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Showcase ---------- */
const PROJECTS = [
  { key:'brandjet',       name:'BrandJet',       tag:'GTM · Outreach', category:'SaaS',     img:'assets/projects/brandjet.png',
    desc:'Find, reach and close customers across every channel. Lead discovery, multichannel outreach and a unified inbox.',
    outcomes:['40 DAYS', '12K+ LEADS', 'LIVE'] },
  { key:'quickreels',     name:'QuickReels',     tag:'AI · Video',     category:'AI',       img:'assets/projects/quickreels.png',
    desc:'Generate AI powered video reels and publish to social on autopilot.',
    outcomes:['30 DAYS', 'LIVE', '8K USERS'] },
  { key:'skylocker',      name:'Skylocker',      tag:'Cloud · Sec',    category:'SaaS',     img:'assets/projects/skylocker.png',
    desc:'Secure cloud storage with end to end encryption for teams.',
    outcomes:['42 DAYS', 'ENTERPRISE'] },
  { key:'depobrief',      name:'DepoBrief',      tag:'Legal · AI',     category:'AI',       img:'assets/projects/depobrief.png',
    desc:'A modern deposition management platform for legal professionals.',
    outcomes:['44 DAYS', '200+ FIRMS'] },
  { key:'capai',          name:'Cap AI',         tag:'Fintech · AI',   category:'Fintech',  img:'assets/projects/capai.png',
    desc:'Smart budgeting, AI insights and dashboards in a gamified personal finance app.',
    outcomes:['32 DAYS', 'iOS LIVE'] },
  { key:'contentpartner', name:'ContentPartner', tag:'AI · Content',   category:'AI',       img:'assets/projects/contentpartner.png',
    desc:'Craft high quality content 2× faster without sacrificing voice.',
    outcomes:['36 DAYS', '2.5K CREATORS'] },
  { key:'contractopay',   name:'Contractopay',   tag:'Fintech',        category:'Fintech',  img:'assets/projects/contractopay.png',
    desc:'One platform to manage, automate and track contractor payments.',
    outcomes:['45 DAYS', 'LIVE'] },
  { key:'fynch',          name:'Fynch',          tag:'E commerce',     category:'Commerce', img:'assets/projects/fynch.png',
    desc:'Custom storefronts with integrated payments for small commerce teams.',
    outcomes:['30 DAYS', 'LIVE'] },
  { key:'motionmuse',     name:'Motionmuse',     tag:'AI · Motion',    category:'AI',       img:'assets/projects/motionmuse.png',
    desc:'Text to video AI for short form storytelling reels.',
    outcomes:['29 DAYS', 'PH FEATURED'] },
  { key:'voxstar',        name:'Voxstar',        tag:'AI · SaaS',      category:'SaaS',     img:'assets/projects/voxstar.png',
    desc:'A launch ready AI SaaS boilerplate with billing, auth and admin baked in.',
    outcomes:['28 DAYS', 'SEED FUNDED'] },
];

function Showcase() {
  const cats = ['All', 'AI', 'SaaS', 'Commerce', 'Fintech'];
  const [filter, setFilter] = useState('All');
  const [expanded, setExpanded] = useState(false);
  const visible = filter === 'All' ? PROJECTS : PROJECTS.filter(p => p.category === filter);
  const PREVIEW = 6;
  const showMask = !expanded && visible.length > PREVIEW;
  const shown = showMask ? visible.slice(0, PREVIEW) : visible;
  const hiddenCount = visible.length - PREVIEW;

  return (
    <section className="showcase-section" id="work">
      <div className="wrap-wide">
        <div className="section-head showcase-head">
          <div className="lhs">
            <div className="section-tag">Recent Work</div>
            <h2 className="section-title">Products we shipped <span className="serif">last quarter</span>.</h2>
            <p className="section-sub">A small studio with a long list of live products. Every build below was designed, engineered and launched end to end by ShipCrew.</p>
          </div>
        </div>

        <div className="showcase-toolbar">
          <div className="filter-chips">
            {cats.map(c => (
              <button key={c} className={`fchip ${filter === c ? 'active' : ''}`} onClick={() => { setFilter(c); setExpanded(false); }}>
                <span>{c}</span>
                <span className="fchip-count mono">{c === 'All' ? PROJECTS.length : PROJECTS.filter(p => p.category === c).length}</span>
              </button>
            ))}
          </div>
          <a href="#cta" className="case-cta-link">All case studies <ArrowUR size={12}/></a>
        </div>

        <div className={`case-grid-wrap ${showMask ? 'is-masked' : ''}`}>
          <div className="case-grid">
            {shown.map((p, i) => (
              <a key={p.key} href="#" className={`case-card reveal in reveal-d${(i % 3) + 1}`}>
                <div className="case-image">
                  <div className="case-num mono">{String(i + 1).padStart(3, '0')} <span>/ {String(visible.length).padStart(3, '0')}</span></div>
                  <img src={p.img} alt={p.name} loading="lazy" />
                  <div className="case-image-fade"></div>
                  <div className="case-hover">
                    <span className="case-hover-cta">View case study</span>
                    <span className="case-hover-arrow"><ArrowUR size={16}/></span>
                  </div>
                </div>

                <div className="case-body">
                  <div className="case-tagrow">
                    <span className="case-cat">{p.category}</span>
                    <span className="case-dot">·</span>
                    <span className="case-tag mono">{p.tag}</span>
                  </div>
                  <h3 className="case-name">{p.name}</h3>
                  <p className="case-desc">{p.desc}</p>
                  <div className="case-outcomes mono">
                    {p.outcomes.map((o, j) => (
                      <React.Fragment key={j}>
                        <span className="case-outcome">{o}</span>
                        {j < p.outcomes.length - 1 && <span className="case-outcome-sep">·</span>}
                      </React.Fragment>
                    ))}
                  </div>
                </div>
              </a>
            ))}
          </div>

          {showMask && (
            <div className="case-mask">
              <div className="case-mask-content">
                <span className="case-mask-tag mono">+ {hiddenCount} MORE {hiddenCount === 1 ? 'PROJECT' : 'PROJECTS'}</span>
                <button className="case-mask-btn" onClick={() => setExpanded(true)}>
                  <span>Expand to see all work</span>
                  <span className="case-mask-arrow">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6"/></svg>
                  </span>
                </button>
              </div>
            </div>
          )}
        </div>

        {expanded && hiddenCount > 0 && (
          <div className="case-collapse-row">
            <button className="case-mask-btn ghost" onClick={() => setExpanded(false)}>
              <span>Show less</span>
              <span className="case-mask-arrow" style={{transform:'rotate(180deg)'}}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6"/></svg>
              </span>
            </button>
          </div>
        )}
      </div>
    </section>
  );
}

/* ---------- Testimonials ---------- */
const TESTIMONIALS = [
  { name:'Ari Ben Zeev',    role:'Founder, Stealth Startup',     initial:'AB', quote:"The team I wish I'd hired the first time around.",          tint:'a',
    src:'https://68523ov1mk.ufs.sh/f/qy94lrVrCJcG5TlC1IW0o4QlVvTckSO2WAiwDrKICNjZRfL1',
    linkedin:'https://www.linkedin.com/in/ariben-zeev/' },
  { name:'Jonathan Bodnar', role:'CEO, Marketing.biz',           initial:'JB', quote:"Daily updates, weekly demos. Total transparency.",          tint:'b',
    src:'https://68523ov1mk.ufs.sh/f/qy94lrVrCJcGPIm556KY6wx8fiWmvn0dVz1basLrekECX3UG',
    linkedin:'https://www.linkedin.com/in/jonathanbodnar/' },
  { name:'Raza Matin',      role:'Recovering startup founder',   initial:'RM', quote:"Senior engineers with real product taste.",                 tint:'c',
    src:'https://68523ov1mk.ufs.sh/f/qy94lrVrCJcG4uH7bRKvQkriJKXA3I1YpSBH5n2ElfZ7NThj',
    linkedin:'https://www.linkedin.com/in/razamatin/' },
  { name:'Gene Da Rocha',   role:'CEO, Voxstar',                 initial:'GR', quote:"We raised our seed on the MVP ShipCrew built.",             tint:'d',
    src:'https://68523ov1mk.ufs.sh/f/qy94lrVrCJcGwJf2YQtZWTgKaPNQcbrsM1R7L4Y9uCneOUif',
    linkedin:'https://www.linkedin.com/in/genedarocha/' },
];

function VideoCard({ t, isPlaying, onToggle }) {
  const videoRef = useRef(null);

  useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    // Nudge to first frame once metadata is in (some browsers won't paint otherwise)
    const onMeta = () => { try { if (v.currentTime === 0) v.currentTime = 0.05; } catch (_) {} };
    v.addEventListener('loadedmetadata', onMeta);
    return () => v.removeEventListener('loadedmetadata', onMeta);
  }, []);

  useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    if (isPlaying) {
      v.play().catch(() => {});
    } else {
      v.pause();
    }
  }, [isPlaying]);

  return (
    <div className={`video-card tint-${t.tint} ${isPlaying ? 'is-playing' : ''}`}
         onClick={onToggle}>
      <video
        ref={videoRef}
        src={t.src}
        className="video-el"
        playsInline
        preload="metadata"
        muted={false}
        onEnded={onToggle}
      />

      {/* readability scrim sits above the video */}
      <div className="video-scrim"></div>
      {t.linkedin && (
        <a
          href={t.linkedin}
          target="_blank"
          rel="noreferrer"
          className="vp-linkedin"
          aria-label={`${t.name} on LinkedIn`}
          onClick={(e) => e.stopPropagation()}
        >
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.36V9h3.41v1.56h.05c.47-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zm1.78 13.02H3.56V9h3.56v11.45z"/>
          </svg>
        </a>
      )}

      <div className="video-overlay">
        <div className="vc-quote">"{t.quote}"</div>
        <div className="vc-row">
          <button className="vc-play" aria-label={isPlaying ? 'Pause' : 'Play'} onClick={(e) => { e.stopPropagation(); onToggle(); }}>
            {isPlaying ? (
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></svg>
            ) : (
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
            )}
          </button>
          <div className="vc-meta">
            <div className="name">{t.name}</div>
            <div className="role">{t.role}</div>
          </div>
        </div>
      </div>
    </div>
  );
}

const QUOTE_TESTIMONIALS = [
  {
    name:'Obaid Ahmed',
    role:'Co Founder, Provision AI',
    initial:'OA',
    quote:"ShipCrew built QuickReels in record time. Complex AI integrations, a polished UI and post launch support, all delivered without missing a single deadline. We're already shipping our second product with them.",
    linkedin:'https://www.linkedin.com/in/obaid/',
  },
  {
    name:'Surendra Patel',
    role:'Director, Gather Capture & Trolly.ai',
    initial:'SP',
    quote:"We've shipped multiple products with ShipCrew across Gather Capture and Trolly.ai. Senior taste, hard deadlines, and the kind of ownership you usually only get from a co founder. Best partnership we've made.",
    linkedin:'https://www.linkedin.com/in/surendra-patel1/',
  },
];

function Testimonials() {
  const [playing, setPlaying] = useState(-1);
  return (
    <section className="section" id="testimonials">
      <div className="wrap">
        <div className="section-head">
          <div className="lhs">
            <div className="section-tag">Clients</div>
            <h2 className="section-title">Founders who <span className="serif">trusted</span> us.</h2>
            <p className="section-sub">Six stories from operators and founders we've shipped with.</p>
          </div>
          <div style={{display:'flex',alignItems:'center',gap:14}}>
            <div className="test-stars">★★★★★</div>
            <div style={{fontSize:13,color:'var(--fg-muted)'}}>4.9 average · 23 reviews</div>
          </div>
        </div>

        <div className="quote-grid">
          {QUOTE_TESTIMONIALS.map((q, i) => (
            <div key={i} className={`quote-card reveal reveal-d${i+1}`}>
              <span className="quote-mark serif">"</span>
              <p className="quote-body">{q.quote}</p>
              <div className="quote-author">
                <div className="quote-avatar">{q.initial}</div>
                <div className="quote-id">
                  <div className="quote-name">{q.name}</div>
                  <div className="quote-role">{q.role}</div>
                </div>
                {q.linkedin && (
                  <a
                    href={q.linkedin}
                    target="_blank"
                    rel="noreferrer"
                    className="quote-linkedin"
                    aria-label={`${q.name} on LinkedIn`}
                  >
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                      <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.36V9h3.41v1.56h.05c.47-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zm1.78 13.02H3.56V9h3.56v11.45z"/>
                    </svg>
                  </a>
                )}
                <div className="quote-stars">★★★★★</div>
              </div>
            </div>
          ))}
        </div>

        <div className="video-grid">
          {TESTIMONIALS.map((t, i) => (
            <VideoCard
              key={i}
              t={t}
              isPlaying={playing === i}
              onToggle={() => setPlaying(playing === i ? -1 : i)}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Pricing ---------- */
const PLANS = [
  {
    badge:'For initial market testing', name:'Early Stage',
    desc:'A market ready MVP in 30 days, designed to validate your idea with real users. Built end to end by senior product engineers, with everything you need to land your first customers.',
    price:'$4,999', per:'/ project',
    features:[
      'Market ready MVP in 30 days',
      '1 to 5 core feature set',
      'Professional UI/UX that converts',
      'Scales to thousands of users',
      'Built in analytics & growth tracking',
      '14 days of launch support',
      'Full code ownership',
    ],
    cta:'Ship in 30 days', ctaStyle:'light', featured:true
  },
  {
    badge:'For funded teams', name:'MVP & Beyond',
    desc:'A long term studio partnership for funded teams. Full product builds, AI features, dedicated engineering and ongoing growth work, scoped to your roadmap.',
    price:"Let's discuss", per:'/ scoped per project',
    features:[
      'Full product builds & native mobile',
      'AI features & advanced integrations',
      'Premium UI/UX & motion system',
      'Bank grade security review',
      'Dedicated senior team, monthly cadence',
      'Ongoing growth & infra retainer',
    ],
    cta:'Book a scope call', ctaStyle:'dark'
  },
];

function Pricing() {
  return (
    <section className="pricing-section" id="pricing">
      <div className="wrap">
        <div className="section-head">
          <div className="lhs">
            <div className="section-tag">Engagements</div>
            <h2 className="section-title">Two ways to <span className="serif">launch</span>.</h2>
            <p className="section-sub">Fixed scope, fixed price. We become your tech department, CTO, design and engineering, so you focus on the market.</p>
          </div>
        </div>

        <div className="pricing-grid">
          {PLANS.map((p, i) => (
            <div key={i} className={`plan ${p.featured ? 'featured' : ''} reveal reveal-d${i+1}`}>
              <div className="plan-badge mono">{p.badge}</div>
              <div className="plan-name">{p.name}</div>
              <div className="plan-desc">{p.desc}</div>
              <div className="plan-price">
                <span className="amt">{p.price}</span>
                <span className="per">{p.per}</span>
              </div>
              <ul className="plan-features">
                {p.features.map((f,j) => (<li key={j}><Check size={16}/><span>{f}</span></li>))}
              </ul>
              <a href="#cta" className={`plan-cta ${p.ctaStyle}`}>{p.cta} <ArrowR size={14}/></a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- FAQ ---------- */
const FAQS = [
  { q:'How long does it take to build and launch?', a:"Most engagements ship a market ready MVP in 30 days. The Enterprise tier ships a full launch ready product in 45 days. We don't take on projects we can't deliver on time." },
  { q:'How much does it cost to work with ShipCrew?', a:"Engagements run $2,999 to $9,999, fixed scope, fixed price. That's ~70% less than a traditional dev shop, because we focus on senior only teams and a tight 30 day cadence." },
  { q:'Do you offer ongoing support after launch?', a:"Yes. Every engagement includes 14 to 30 days of post launch support. After that, we offer monthly retainers for product evolution, infra and growth experiments." },
  { q:'What tech stack do you use?', a:"Defaults are Next.js, TypeScript, Tailwind, Postgres and Vercel. We choose the right stack per project, including native mobile, Python AI services and Stripe billing where it fits." },
  { q:'Do I need a technical background?', a:"No. Many of our founders are non technical. We handle every line of code, walk you through every product decision in plain English, and hand over full ownership at launch." },
  { q:'How do you ensure product market fit?', a:"We don't promise PMF, but we validate hard. Every MVP ships with analytics, onboarding flows and a structured first 10 customers playbook so you can learn fast." },
];

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq">
      <div className="wrap">
        <div className="section-head" style={{justifyContent:'center',textAlign:'center'}}>
          <div className="lhs" style={{textAlign:'center',margin:'0 auto'}}>
            <div className="section-tag" style={{justifyContent:'center'}}>FAQ</div>
            <h2 className="section-title">The <span className="serif">obvious</span> questions.</h2>
            <p className="section-sub" style={{margin:'18px auto 0'}}>Everything you need to know before booking a call.</p>
          </div>
        </div>

        <div className="faq-list">
          {FAQS.map((f, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="q">
                <h4>{f.q}</h4>
                <span className="plus"><Plus size={14}/></span>
              </div>
              <div className="a"><p style={{paddingTop:8}}>{f.a}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- CTA ---------- */
function CTA() {
  return (
    <section className="cta-section" id="cta">
      <div className="cta-glow"></div>
      <div className="wrap">
        <div className="cta-inner">
          <div className="eyebrow"><span className="pulse"/> 2 slots left for Q3 2025</div>
          <h2 style={{marginTop:24}}>Let's get your idea to <span className="serif">paying customers</span>.</h2>
          <p>Book a free 30 minute product consultation with our founders. No pitch deck required, just bring your idea.</p>

          <div style={{display:'flex',gap:14,justifyContent:'center',flexWrap:'wrap',marginTop:8}}>
            <a href="https://cal.com/mtaimoor/30min" className="btn-primary" target="_blank" rel="noreferrer">
              Book intro call <span className="arrow"><ArrowR size={16}/></span>
            </a>
            <a href="mailto:hello@shipcrew.co" className="btn-ghost">hello@shipcrew.co</a>
          </div>

          <div className="founders">
            <div className="founders-imgs">
              <img src="assets/founders/taimoor.jpeg" alt="" />
              <img src="assets/founders/salman.jpg" alt="" />
              <img src="assets/team/member3.png" alt="" />
              <span className="founders-more">+10</span>
            </div>
            <div className="founders-text">
              <b>The ShipCrew team</b>
              You'll meet the founders, not a salesperson.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div className="footer-brand">
              <span className="brand-mark" style={{width:28,height:28}}><img src="assets/brand/Logo.svg" alt="ShipCrew"/></span> ShipCrew<span style={{color:'var(--accent)'}}>.</span>
            </div>
            <p className="footer-tag"><s style={{opacity:0.5}}>We develop products.</s><br/><span style={{fontFamily:"'Instrument Serif', serif",fontStyle:'italic',color:'var(--cream)',fontSize:'30px',display:'inline-block',marginTop:'4px',letterSpacing:'-0.015em'}}>We build businesses.</span></p>
          </div>
          <div className="footer-col">
            <h5>Studio</h5>
            <ul>
              <li><a href="#work">Recent work</a></li>
              <li><a href="#process">Process</a></li>
              <li><a href="#pricing">Pricing</a></li>
              <li><a href="#">Case studies</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Company</h5>
            <ul>
              <li><a href="#testimonials">Clients</a></li>
              <li><a href="#faq">FAQ</a></li>
              <li><a href="#">Careers</a></li>
              <li><a href="mailto:hello@shipcrew.co">Contact</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Connect</h5>
            <ul>
              <li><a href="https://twitter.com/shipcrewco">Twitter / X</a></li>
              <li><a href="#">LinkedIn</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© {new Date().getFullYear()} ShipCrew. All rights reserved.</div>
          <div style={{display:'flex',gap:18}}>
            <a href="#">Terms</a>
            <a href="#">Privacy</a>
            <a href="mailto:hello@shipcrew.co">hello@shipcrew.co</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ---------- App ---------- */

/* ---------- Big bleed (after footer) ---------- */
function BigBleed() {
  return (
    <section className="bigbleed" aria-hidden="false">
      <div className="bigbleed-inner">
        <span className="bb-line">
          <span className="bb-quote">“</span>A gap seen, <span className="serif">is a golden</span> opportunity to fill.<span className="bb-quote">”</span>
        </span>
      </div>
      <div className="bigbleed-glow"></div>
    </section>
  );
}

function App() {
  // reveal-on-scroll
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  // initialize 3D after mount
  useEffect(() => {
    const s = document.createElement('script');
    s.src = 'hero3d.js';
    s.defer = true;
    document.body.appendChild(s);
    return () => { s.remove(); };
  }, []);

  return (
    <>
      <Nav />
      <Hero />
      <Marquee />
      <Process />
      <KPI />
      <Showcase />
      <Testimonials />
      <Pricing />
      <FAQ />
      <CTA />
      <div className="endblock">
        <Footer />
        <BigBleed />
      </div>
    </>
  );
}

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