/* global React, I, WORK */
function PublicHome() {
  const work = (window.WORK || []).filter(p => ['young-ko-modomode', 'akademy-ai'].includes(p.id));
  const selected = work.length ? work : (window.WORK || []).filter(p => p.category === 'digital').slice(0, 2);
  const showcase = [
    {key:'mpact-email',client:'MPACT MENTORING',title:'Client-branded email campaigns',copy:'An approved brand hero, clear message, useful context and one next action in the official Eleven Views email system.',type:'email',image:'/assets/campaign-showcase/mpact-email-hero.png',alt:'MPACT Mentoring branded email hero featuring youth basketball participants'},
    {key:'cpt-content',client:'CAESAR’S PRO TOUCH',title:'Custom social content',copy:'A complete green-and-black CPT post built from the real brand system, with a focused message and one clear action.',type:'social',image:'/assets/campaign-showcase/cpt-field.jpg',alt:'Soccer field under lights in Caesar’s Pro Touch brand colors'},
    {key:'website-update',client:'MPACT × ATLAS',title:'No-code website updates',copy:'See the request become a live page. Atlas organizes the change while the client follows a clear, reviewed publishing workflow.',type:'website'},
    {key:'request-paths',client:'ATLAS OPERATIONS',title:'One request path, wherever the team works',copy:'Slack, portal, Atlas email, text and calls feed one organized queue with drafts, approvals and deliverables kept together.',type:'channels'},
  ];
  const [showcaseIndex,setShowcaseIndex] = React.useState(0);
  const [showcasePaused,setShowcasePaused] = React.useState(false);
  React.useEffect(()=>{if(showcasePaused)return undefined;const timer=window.setInterval(()=>setShowcaseIndex(index=>(index+1)%showcase.length),5200);return()=>window.clearInterval(timer);},[showcasePaused,showcase.length]);
  const activeShowcase=showcase[showcaseIndex];
  return <main className="launch-home">
    <section className="launch-hero"><div className="launch-hero-copy">
      <h1>Let’s launch<br />your <em>brand.</em></h1>
      <p>Turn your ideas into organized projects, useful content and a brand ready for the world. Create with Atlas, or bring in our team for strategy, design and production.</p>
      <div className="launch-actions"><a className="btn btn-gold btn-lg" href="/atlas">Launch with Atlas <I name="arrow" size={16} /></a><a className="btn btn-line btn-lg" href="/contact">Work with our team <I name="arrow" size={16} /></a></div>
      <div className="launch-hero-note"><span>YOUR IDEA, YOUR PACE.</span><span>Explore first. Make an account when you’re ready.</span></div>
    </div><div className="launch-visual launch-directory" aria-label="Explore Eleven Views">
      <span className="launch-eyebrow">FROM THE FIRST IDEA TO THE NEXT RELEASE</span>
      <a href="/atlas"><span>01 / CREATE</span><h2>Your project.<br /><em>With Atlas.</em></h2><I name="arrow" size={24}/></a>
      <a href="/services"><span>02 / BUILD</span><h2>A studio<br /><em>behind you.</em></h2><I name="arrow" size={24}/></a>
      <a href="/learn"><span>03 / LEARN</span><h2>Make your<br /><em>next move.</em></h2><I name="arrow" size={24}/></a>
    </div></section>
    <div className="launch-strip"><span>WEBSITES & APPS</span><i /><span>BRAND & DESIGN</span><i /><span>PHOTO & FILM</span><i /><span>YOUR NEXT IDEA</span></div>
    <section className="launch-paths" id="start" aria-labelledby="launch-paths-title"><div className="launch-section-label"><span>01 / CHOOSE YOUR START</span><h2 id="launch-paths-title">An idea.<br />A way forward.</h2></div>
      <div className="launch-path"><span className="launch-path-no">A / SELF-DIRECTED</span><h3>Launch with Atlas.</h3><p>Start a private project. Collect your ideas, refine your brief and keep your work together. Connect Puter when you want AI assistance.</p><a href="/atlas">Explore the workspace <I name="arrow" size={16} /></a><small>Free account. Optional AI. Your work stays accessible.</small></div>
      <div className="launch-path"><span className="launch-path-no">B / STUDIO-LED</span><h3>Work with our team.</h3><p>Websites, brand design, photography, video and marketing. Bring us the ambition. We’ll work out the right way to make it real.</p><a href="/work">See what we’ve built <I name="arrow" size={16} /></a><small>Personal direction. A clear scope. Work made together.</small></div>
    </section>
    <section className="launch-atlas-section" id="atlas"><div className="launch-atlas-intro"><span className="launch-eyebrow">02 / YOUR ATLAS WORKSPACE</span><h2>Give the idea<br />a place to grow.</h2><p>Keep your goal, conversations and deliverables together. Ask Atlas for a plan, draft content or create an image using your connected Puter account.</p><p>Open the result, download it and keep developing the work inside your project.</p><a className="btn btn-gold" href="/register">Create a free account <I name="arrow" size={15} /></a></div>
      <div className="launch-steps"><div><b>01</b><section><h3>Start with the outcome.</h3><p>Name your project and tell Atlas who it is for, what you are making and what success looks like.</p><span>PROJECTS + SAVED BRIEFS</span></section></div><div><b>02</b><section><h3>Make something useful.</h3><p>Chat, draft a document or create an image. Automatic, Fast and Best quality modes keep the choice simple.</p><span>AI USES YOUR CONNECTED PUTER ACCOUNT</span></section></div><div><b>03</b><section><h3>Keep moving from the work.</h3><p>Preview documents, images and PDFs. Download saved files and return to the conversation for the next revision.</p><span>CONVERSATIONS + FILE LIBRARY</span></section></div></div>
    </section>
    <section className="launch-managed-campaigns" id="managed-campaigns" aria-labelledby="managed-campaigns-home-title"><div className="launch-campaign-copy"><span className="launch-eyebrow">03 / REMOTE SOCIAL MEDIA MANAGEMENT</span><h2 id="managed-campaigns-home-title">A managed team<br/><em>behind every campaign.</em></h2><p>Bring us the outcome. We plan the campaign, create the assets, manage the publishing rhythm, update the website and report the actions that matter.</p><div className="launch-campaign-price"><span>Starting at</span><strong>$1,450</strong><small>per month</small></div><div className="launch-actions"><a className="btn btn-gold" href="/booking?service=campaigns&tier=remote">Request campaign management <I name="arrow" size={15}/></a><a className="btn btn-line" href="/services#managed-campaigns-title">Compare all plans</a></div><p className="launch-campaign-note">Advertising spend is approved and paid directly by the client. A one-time launch setup is confirmed in the proposal.</p></div><div className="launch-campaign-deliverables"><span>WHAT YOUR MONTH CAN INCLUDE</span>{[
      ['image','Social campaign assets','Original graphics, captions and short video edits built around an approved goal.'],
      ['mail','Branded email marketing','Custom campaign emails using the official Eleven Views client email system.'],
      ['monitor','No-code website updates','Program pages, campaign messages, forms and calls to action updated for you.'],
      ['msg','Atlas request channels','Send work through Slack, the client portal, email, text or call.'],
    ].map(([icon,title,copy],index)=><article key={title}><b>0{index+1}</b><I name={icon} size={21}/><div><h3>{title}</h3><p>{copy}</p></div></article>)}</div></section>
    <section className="launch-offers" id="services" aria-labelledby="launch-offers-title">
      <div className="launch-section-label"><span>04 / PRODUCTS &amp; SERVICES</span><h2 id="launch-offers-title">Build it yourself.<br /><em>Build it with us.</em></h2></div>
      <div className="launch-showcase" aria-roledescription="carousel" aria-label="Campaign deliverable examples">
        <div className="launch-showcase-visual" key={activeShowcase.key}>
          {activeShowcase.type==='email'?<div className="launch-email-card"><header><img src="/assets/eleven-views-logo.png" alt=""/><span><strong>Atlas · Eleven Views</strong><small>atlas@elevenviews.io</small></span></header><img className="launch-email-hero" src={activeShowcase.image} alt={activeShowcase.alt}/><section><h3>A clear view, then the next move.</h3><p>Campaign context, current priorities and one approved action arrive in a format the client can use.</p><div><span>Current view</span><span>Next action</span><span>Approval</span></div><b>Review campaign →</b></section></div>
          :activeShowcase.type==='social'?<article className="launch-social-post"><header><img className="launch-social-avatar" src="/assets/campaign-showcase/cpt-logo.jpg" alt=""/><span><strong>caesarsprotouch</strong><small>Player development · Springfield</small></span><b>FOLLOW</b></header><div className="launch-social-creative"><img src={activeShowcase.image} alt={activeShowcase.alt}/><img className="launch-social-mark" src="/assets/campaign-showcase/cpt-logo.jpg" alt="Caesar’s Pro Touch"/><span>PLAYER DEVELOPMENT</span><h3>YOUR NEXT LEVEL<br/>STARTS HERE.</h3><p>One coach. One plan.<br/>Built around your game.</p><b>BOOK A FREE ASSESSMENT →</b></div><footer><div className="launch-social-actions"><span>♡</span><span>◇</span><span>↗</span><b>⌑</b></div><strong>Build the player behind the performance.</strong><p><b>caesarsprotouch</b> Focused development for athletes ready to train with purpose.</p><small>Sponsored · View insights</small></footer></article>
          :activeShowcase.type==='website'?<div className="launch-agent-thread" aria-label="Atlas website update conversation"><header><img src="/assets/eleven-views-logo.png" alt=""/><span><strong>Atlas</strong><small>Eleven Views website agent</small></span><b>ONLINE</b></header><div className="launch-thread-body"><div className="launch-thread-agent"><span>A</span><p>What would you like to update on the website?</p></div><div className="launch-thread-user"><div className="launch-type-sequence" aria-label="Update the programs page with the correct registration link and a clear Apply Now button."><span className="launch-type-message">Update the programs page with the correct registration link and a clear Apply Now button.</span></div></div><div className="launch-thread-agent launch-thread-result"><span>A</span><p><strong>Got it.</strong> I’ll update the program details, replace the registration link and prepare the page for your review.</p></div></div><footer><span>Website context connected</span><span>Approval required before publishing</span></footer></div>
          :activeShowcase.type==='channels'?<div className="launch-channel-visual"><span><I name="msg" size={23}/><strong>Dedicated Slack</strong></span><span><I name="monitor" size={23}/><strong>Client portal</strong></span><span><I name="mail" size={23}/><strong>Email Atlas</strong></span><span><I name="phone" size={23}/><strong>Text or call</strong></span><p>ATLAS ORGANIZES THE REQUEST</p></div>:null}
        </div>
        <div className="launch-showcase-copy"><span className="launch-showcase-count">{String(showcaseIndex+1).padStart(2,'0')} / {String(showcase.length).padStart(2,'0')} · {activeShowcase.client}</span><h3>{activeShowcase.title}</h3><p>{activeShowcase.copy}</p><div className="launch-showcase-controls"><button type="button" onClick={()=>setShowcaseIndex(index=>(index-1+showcase.length)%showcase.length)} aria-label="Previous example"><I name="arrowL" size={15}/></button>{showcase.map((item,index)=><button type="button" key={item.key} className={index===showcaseIndex?'is-active':''} onClick={()=>setShowcaseIndex(index)} aria-label={`Show ${item.title}`} aria-current={index===showcaseIndex?'true':undefined}><span/></button>)}<button type="button" onClick={()=>setShowcaseIndex(index=>(index+1)%showcase.length)} aria-label="Next example"><I name="arrow" size={15}/></button><button type="button" className="launch-showcase-pause" onClick={()=>setShowcasePaused(value=>!value)}>{showcasePaused?'Play':'Pause'}</button></div></div>
      </div>
      <div className="launch-offer-grid">{[
      ['monitor','Websites & apps','A clear offer, thoughtful design and a working home for your business. Scope can include forms, bookings, payments and ongoing hosting.','Explore website services','/services/web'],
      ['spark','Agents & automation','Work with our team to define an agent’s role, knowledge and approved actions. Voice and business integrations are scoped around your workflow.','Discuss an agent project','/contact?topic=agents'],
      ['image','Content & campaigns','Remote social media management, branded email, website updates and campaign assets. Managed plans start at $1,450 per month.','Compare campaign plans','/services#managed-campaigns-title'],
      ['book','Courses & digital products','Learn how to develop a character, shape an offer and prepare a launch. Bring the work from your lessons into an Atlas project.','Explore learning','/learn'],
    ].map(([icon,title,copy,label,href])=><article key={title}><I name={icon==='book'?'fileText':icon} size={23}/><h3>{title}</h3><p>{copy}</p><a href={href}>{label}<I name="arrow" size={15}/></a></article>)}</div><p className="launch-offer-note">Studio work begins with an agreed scope and quote. Hosting, third-party usage and ongoing support are specified in your proposal.</p></section>
    <section className="launch-agent-direction" aria-labelledby="agent-direction-title"><div><span className="launch-eyebrow">THE NEXT ATLAS EXPERIENCE / IN DEVELOPMENT</span><h2 id="agent-direction-title">An agent that<br /><em>feels like yours.</em></h2><p>We’re developing realistic, 3D character and symbol styles, saved preferences and voice conversations for the same project workspace.</p><p>Start with Atlas chat today. Talk to the studio if you want to plan a custom agent or voice workflow.</p><a className="btn btn-line" href="/contact?topic=agents">Plan your agent with us <I name="arrow" size={15}/></a></div><div className="launch-agent-cards">{[["realistic","01","Realistic","/assets/atlas-realistic-reference.jpg","Portrait reference for a realistic agent appearance","A human appearance with clear AI identification."],["character","02","3D character","/assets/atlas-character-reference.png","3D character wearing a black cap and gold sunglasses, holding a phone","An expressive identity shaped around your brand."],["symbol","03","Symbol","/assets/eleven-views-logo-selected.png","Gold Eleven Views logo","A minimal identity that puts the work first."]].map(([style,number,title,src,alt,copy])=><figure className={`launch-agent-card launch-agent-card-${style}`} key={style}><div className="launch-agent-card-image"><img src={src} alt={alt} loading="lazy" decoding="async"/><span>STYLE REFERENCE</span></div><figcaption><span>{number}</span><h3>{title}</h3><p>{copy}</p></figcaption></figure>)}</div></section>
    <section className="launch-portal-preview" aria-labelledby="portal-preview-title"><div><span className="launch-eyebrow">YOUR PRIVATE WORKSPACE</span><h2 id="portal-preview-title">The work and the conversation.<br /><em>In one place.</em></h2><p>Create documents, review versions and keep feedback beside the work. Open a private Atlas conversation when you want help thinking or drafting.</p><a className="btn btn-line" href="/portal">Open your workspace <I name="arrow" size={15}/></a></div><p>Your documents, images and PDFs stay available to the people working with Eleven Views in that workspace.</p></section>
    <section className="launch-work"><div className="launch-section-label"><span>05 / BUILT BY THE STUDIO</span><div><h2>Ideas out<br /><em>in the world.</em></h2><a href="/work">View all work ↗</a></div></div><div className="launch-work-grid">{selected.map(p => <a className="launch-work-item" key={p.id} href={`/work/${p.id}`}><div className="launch-work-image">{p.cover?.video ? <video src={p.cover.video} poster={p.cover.poster} muted playsInline autoPlay loop preload="metadata" aria-label={p.title} /> : <img src={p.cover?.image} alt={p.title} loading="lazy" />}</div><div><span>{p.client} / {p.year}</span><h3>{p.title}<span>↗</span></h3><p>{p.summary}</p></div></a>)}</div><p className="launch-work-footnote">Real studio projects. Explore the work and its scope, then tell us what you have in mind.</p></section>
    <section className="launch-faq"><div className="launch-section-label"><span>06 / A FEW GOOD QUESTIONS</span><h2>Clear from<br />the beginning.</h2></div><div>{[
      ['Is Eleven Views free to start?', 'You can create an Eleven Views account and organize your projects for free. Studio services and managed hosting are separately scoped and priced.'],
      ['How does the free AI allowance work?', 'AI assistance uses your connected Puter account. Puter provides a monthly free allowance under its current terms. Availability and usage vary by model. If you use it up, you can wait for renewal or purchase more from Puter. It is not unlimited AI or a separate allowance for every Eleven Views project.'],
      ['Can I keep working if my AI usage runs out?', 'Yes. Account access, saved project briefs, editing, downloads and public browsing do not require a Puter balance. Only new AI requests depend on available model usage.'],
      ['Can I use voice or create a complete website?', 'Voice conversations, personalized agent profiles, background automation and complete website generation are in development. Atlas currently supports project chat, document drafting and image creation through a connected Puter account. For a website or custom agent project, work with our team.'],
      ['What if I want a person to help?', 'That is what our studio is here for. Browse our portfolio, tell us about your project, or book a photography or video session. We will agree on the scope before work starts.'],
    ].map(([q,a]) => <details key={q}><summary>{q}<span>+</span></summary><p>{a}</p></details>)}</div></section>
    <section className="launch-close"><span className="launch-eyebrow">AN IDEA IS A GOOD PLACE TO START.</span><h2>What are we<br /><em>making next?</em></h2><div className="launch-actions"><a className="btn btn-gold btn-lg" href="/register">Start your project <I name="arrow" size={16} /></a><a className="btn btn-line btn-lg" href="/contact">Talk to the team <I name="arrow" size={16} /></a></div></section>
  </main>;
}
function AtlasLanding() {
  return <main className="atlas-landing"><span className="launch-eyebrow">ATLAS / BY ELEVEN VIEWS</span><h1>Your idea.<br /><em>Your next step.</em></h1><p>Give your work a home. Start a project, add your brief and use Atlas to draft a plan, develop content or create an image. Keep the conversation beside the files you make.</p><div className="launch-actions"><a className="btn btn-gold btn-lg" href="/register">Create a free account <I name="arrow" size={16}/></a><a className="btn btn-line btn-lg" href="/login">Sign in</a></div><div className="atlas-availability"><section><span>IN YOUR WORKSPACE</span><h2>Chat. Create. Keep going.</h2><p>Organize projects and saved briefs. Connect Puter for text and image assistance, with Automatic, Fast and Best quality modes. Preview your documents, images and PDFs, then download or continue working in chat.</p><a href="/portal">Open your workspace <I name="arrow" size={14}/></a></section><section><span>IN DEVELOPMENT</span><h2>Make Atlas your own.</h2><p>Personal agent profiles in realistic, 3D character and symbol styles. Voice conversations and approved background workflows. Complete website generation and publishing will follow verified release testing.</p><a href="/contact?topic=agents">Discuss a custom agent project <I name="arrow" size={14}/></a></section></div><p className="atlas-terms">AI requests use your connected Puter account. Puter provides a free monthly allowance under its terms; model availability and usage limits vary. Check your balance in Puter before generating. <a href="https://docs.puter.com/user-pays-model/" target="_blank" rel="noopener noreferrer">How Puter usage works</a>. Eleven Views studio services and hosting are quoted separately.</p><p className="atlas-terms">Saved project work remains accessible without making a new AI request. Review generated content before using it publicly.</p></main>;
}
function LearningLanding() {
  return <main className="atlas-landing"><span className="launch-eyebrow">LEARN / WITH ELEVEN VIEWS</span><h1>Learn it.<br /><em>Build with it.</em></h1><p>Develop your idea with guided learning, then bring the brief, references and assignments into an Atlas project. Keep what you learn connected to what you make.</p><div className="atlas-availability"><section><span>COURSES</span><h2>Explore the course library.</h2><p>Browse current courses, lesson outlines and enrollment options on Eleven Views Courses. Availability and course pricing are shown there.</p><a className="btn btn-gold" href={window.STUDIO_CONTACT.coursesUrl}>Browse courses <I name="arrow" size={15}/></a></section><section><span>PUT IT INTO PRACTICE</span><h2>Give the assignment a project.</h2><p>Create a project for your idea, add the goal and keep your drafts and generated visuals together. Course progress stays in the learning platform; project work stays in your workspace.</p><a className="btn btn-line" href="/register">Start a project <I name="arrow" size={15}/></a></section></div></main>;
}
window.PublicHome = PublicHome;
window.AtlasLanding = AtlasLanding;
window.LearningLanding = LearningLanding;