import Link from "next/link";
import { SiteShell } from "../components/SiteShell";

const services = [
  ["01", "AI Avatars", "Create an authorized avatar based on a creator’s current or younger image—or build an original digital human IP from scratch."],
  ["02", "Content Growth", "Turn one idea into multilingual, multi-format content assets for multiple platforms."],
  ["03", "Fan Relationships", "Carry conversations from comments into DMs, so fans feel seen, understood, and motivated to stay."],
  ["04", "Fan Monetization", "Combine subscriptions, paid content, tips, and exclusive interactions to build recurring revenue."],
];

export default function Home() {
  return <SiteShell><main>
    <section className="hero paper">
      <div className="shell hero-grid">
        <div className="hero-copy">
          <p className="eyebrow">AI CREATOR PARTNERSHIP</p>
          <h1>Turn your influence<br/>into a second <span className="accent">growth curve</span></h1>
          <p className="lead">Create an AI avatar based on a real creator’s current or younger image—or launch a fully original digital human IP with no real-person prototype. We produce content, nurture fan relationships, and turn those relationships into sustainable revenue.</p>
          <div className="actions"><Link className="btn primary" href="/contact">Apply to Partner <b>→</b></Link><Link className="link" href="/cases">Explore Scenarios <b>→</b></Link></div>
        </div>
        <div className="hero-art" aria-label="AI creator growth system illustration">
          <div className="portrait-card"><span>CREATOR</span><div className="portrait-shape"><i/><i/><i/></div><strong>Real Influence</strong><small>Voice · Taste · Trust</small></div>
          <div className="twin-card"><span>AI AVATAR</span><strong>Iconic Image, Reborn</strong><small>Current · Younger Era · Voice</small></div>
          <div className="original-card"><span>ORIGINAL IP</span><strong>Built from Zero</strong><small>Identity · Persona · World</small></div>
          <div className="orbit-label">AI avatar connected <i/></div>
        </div>
      </div>
      <div className="shell proof"><div><i>✦</i>A complete creator growth system</div><div><strong>1:1</strong><span>Tailored Partnership</span></div><div><strong>4</strong><span>Core Growth Modules</span></div><div><strong>∞</strong><span>Scalable Opportunities</span></div></div>
    </section>

    <section className="economy-section">
      <div className="shell economy-grid">
        <div className="economy-copy">
          <p className="eyebrow">COZSWEET CREATOR REVENUE ENGINE</p>
          <h2>THE AI CREATOR<br/>ECONOMY HAS<br/><span>ARRIVED</span></h2>
          <p>Cozsweet does more than help you create content. We turn content-driven traffic into lasting fan relationships—and monetize those relationships through subscriptions, paid chats, premium content, tips, and exclusive interactions.</p>
          <div className="economy-actions"><Link className="btn economy-btn" href="/advantages">Explore Revenue Growth <b>→</b></Link><small>From reach, to relationships, to revenue</small></div>
        </div>
        <div className="revenue-visual" aria-label="Cozsweet creator revenue system illustration">
          <div className="revenue-glow"/>
          <div className="revenue-phone">
            <div className="phone-top"><i/><span>COZSWEET</span><b>•••</b></div>
            <div className="phone-greeting"><span>CREATOR REVENUE</span><strong>Grow Multiple Revenue Streams</strong><small>Your content value is being converted</small></div>
            <div className="revenue-amount"><strong>$12,680</strong><span>Monthly revenue · Demo data</span></div>
            <div className="revenue-chart"><div/><div/><div/><div/><div/><div/></div>
            <div className="revenue-list"><div><i>01</i><span>Subscriptions</span><b>↗</b></div><div><i>02</i><span>Paid Chats</span><b>↗</b></div><div><i>03</i><span>Premium Content</span><b>↗</b></div><div><i>04</i><span>Fan Tips</span><b>↗</b></div></div>
          </div>
          <div className="revenue-float top"><small>FAN RELATIONSHIPS</small><strong>Comments → DMs → Community</strong></div>
          <div className="revenue-float bottom"><small>Monthly growth · Demo data</small><strong>+$3,280 <em>↑ 35%</em></strong></div>
        </div>
      </div>
    </section>

    <section className="section shell">
      <div className="split"><div><p className="kicker">OUR MODEL</p><h2>Not here to replace creators.<br/>Here to amplify them</h2></div><div className="model-copy"><p>For established creators, we amplify their image, voice, and fan trust. Without a real-person prototype, we can define a new identity, persona, and story from the ground up to build an entirely original digital human IP.</p><div className="model-paths"><span><i/>Authorized Creator Avatar</span><span><i/>Original Digital Human IP</span></div></div></div>
      <div className="service-grid">{services.map(([no,title,text])=><article key={no}><span>{no}</span><div/><h3>{title}</h3><p>{text}</p></article>)}</div>
    </section>

    <section className="section dark"><div className="shell"><div className="split light"><div><p className="kicker">PARTNERSHIP VALUE</p><h2>From creating more content<br/>to building more value</h2></div><Link className="btn pale" href="/advantages">Why Partner With Us <b>→</b></Link></div><div className="flow">{[["01","Reach More Fans","Expand Content Reach"],["02","Respond at Scale","Build Relationships"],["03","Compound Trust","Create an Asset"],["04","Monetize Influence","Grow Recurring Revenue"]].map((x,i)=><article className={i===3?"hot":""} key={x[0]}><span>{x[0]}</span><strong>{x[1]}</strong><small>{x[2]}</small></article>)}</div></div></section>

    <section className="section shell"><div className="title-row"><div><p className="kicker">PARTNERSHIP SCENARIOS</p><h2>Flexible models for different stages</h2></div><Link className="link" href="/cases">View All Scenarios <b>→</b></Link></div><div className="scenario-grid">{[["Individual Creators","Keep your current and iconic younger image creating value","AI Avatar · Younger-Era Avatar · Multi-Platform Content","purple"],["Original Digital Human IP","Build a virtual creator designed for long-term growth and monetization","Original Persona · Content Matrix · Fan Relationships","coral"],["MCN / Agency","Use one system to grow and monetize multiple creators","Scalable Onboarding · Standard Workflows · Data Insights","blue"]].map(([label,title,tags,color])=><article className={`scenario ${color}`} key={label}><span>{label}</span><h3>{title}</h3><p>{tags}</p><Link href="/cases">↗</Link></article>)}</div></section>

    <section className="cta shell"><div><p className="kicker">START A PARTNERSHIP</p><h2>You bring the influence.<br/>We take it further</h2></div><div><p>Tell us about your creator profile, audience size, and current goals. We’ll design an initial partnership path around your real assets.</p><Link className="btn primary" href="/contact">Start a Partnership <b>→</b></Link></div></section>
  </main></SiteShell>;
}