import React, {useState} from 'react';
import { createRoot } from 'react-dom/client';
import './style.css';

const base = 'https://avtip.us/f-users/user_103979/website_104435';
const img = p => `${base}/${p}`;

function MailLink(){
  const [shown,setShown]=useState(false);
  const address='info'+'@'+'avtip.us';
  return <button className="mail-link" onClick={()=> shown ? location.href=`mailto:${address}` : setShown(true)}>{shown ? address : 'info [at] avtip.us'}</button>
}

const tabs = [
  {id:'who', title:'מי אנחנו?', content:<>
    <ul className="members"><li>אייל שכטר – שירה וגיטרה אקוסטית</li><li>אמיר בן-דוד – גיטרות ושירה</li><li>טל יניב – קלידים ושירה</li><li>שרון הולצמן – בס ושירה</li><li>רונן אברון – תופים</li></ul>
    <div className="photo-strip">
      <img src={img('images/thumbs/W_960_194987401_10160069152709237_4252768609086036658_n.jpeg')} />
      <img src={img('images/thumbs/W_960_270936378_576017847107162_407719937197173471_n.jpeg')} />
      <img src={img('images/thumbs/W_960_270775985_576017680440512_2241405922634387049_n.jpeg')} />
      <img src={img('images/thumbs/W_960_270935955_576017683773845_576294367281430681_n.jpeg')} />
      <img src={img('images/thumbs/W_960_196338725_431547418220873_4435588049436418993_n.jpeg')} />
    </div>
  </>},
  {id:'from', title:'מאיפה באנו?', content:<>
    <p>הקמנו את אבטיפוס בקריות באמצע שנות השמונים והלהקה עברה מאז גלגולי הרכב שונים. בכל הגלגולים מתחילת הדרך ועד היום היו חברים אייל שכטר, אמיר בן-דוד וטל יניב. בהרכב המקורי שפעל בעיקר בקריות היו חברים גם אריק שחר, גיא דובדבני ואסף מרוז (שהצטרף בהמשך ל"איפה הילד").</p>
    <p>בשנת 1990 הצטרפו ללהקה המתופף איציק הלל והבסיסט שרון הולצמן שהיו שותפים ללהיט הראשון - חידוש לשיר "16 מלאו לנער" של גבי שושן. כותב השיר, עלי מוהר, הוסיף עבור הלהקה שורה חדשה לשיר - "ולא תמיד העצב הוא מתוק, ויש אולי עוד קצב חוץ מרוק".</p>
    <p>האלבום הראשון, "מה החזאי מבין", יצא ב-1995 (בהפקת יהודה עדר) וזכה להצלחה גדולה. הוא כלל להיטי ענק כמו "תשאירי לי מקום לחבק אותך", "מועקה", "בוקר טוב עולם", "אשה אשה" ו"הנה ההומור שלי". באותה שנה נבחרנו ללהקת השנה של גלי צה"ל ושל קול ישראל, והופענו בכל רחבי הארץ. לאחר הקלטת האלבום "מה החזאי מבין" החליף את המתופף איציק הלל המתופף אסף זמיר.</p>
    <img className="album" src={img('images/avtipos_mahahazaymevin.jpg')} />
    <p>ב-1997 יצא האלבום השני, "איך עושים מים", שלא הצליח כמו קודמו, למרות שכלל גם הוא להיטים כמו "איך עושים מים", "נמסים מאהבה", "הלילה הזה" (שיר הנושא מתוך הסרט "לילסדה") ו"ציפור".</p>
    <img className="wide" src={img('images/maim.jpg')} />
    <p>מ-2011 אנחנו מופיעים ומקליטים ללא הפסקה.</p>
    <p>ב-2015 יצא האלבום השלישי, ״הודעה לנוסעים מחוץ לזמן״. באלבום השתתפו בועז וולף בתופים וטל לוי (טלוי) בבס, שניהם גם הפיקו את האלבום.</p>
    <img className="album" src={img('images/album_front_small.png')} />
    <p>ב-2020 חזרנו להופיע ולהקליט יחד עם שרון הולצמן והצטרף אלינו רונן אברון בתופים.</p>
  </>},
  {id:'break', title:'למה התפרקנו?', content:<h3>כי נמאס לנו לנגן אחד עם השני.</h3>},
  {id:'reunion', title:'למה התאחדנו?', content:<>
    <h3>כי התגעגענו לנגן אחד עם השני.</h3>
    <p>זה התחיל בקטנה: ב-2011 הקלטנו את השיר "<a href="https://www.youtube.com/results?search_query=%D7%A4%D7%9C%D7%90%D7%A4%D7%9C+%D7%90%D7%95%D7%A1%D7%9C%D7%95+%D7%90%D7%91%D7%98%D7%99%D7%A4%D7%95%D7%A1" target="_blank">פלאפל אוסלו</a>", כשיר נושא לספר "פלאפל אוסלו" של אמיר בן-דוד. בעקבות הקלטת השיר החלטנו לחזור ולפעול יחד כלהקה וצרפנו אליה את טל לוי ובועז וולף.</p>
    <img className="wide" src={img('images/boaz_tal.jpg')} />
    <p className="credit">(צילום: עמיר טרקל)</p>
    <p>ערב הקורונה ב-2020 חזרנו לנגן ולהופיע עם שרון הולצמן, והצטרף אלינו רונן אברון בתופים.</p>
    <div className="two"><img src={img('images/270936378_576017847107162_407719937197173471_n.jpeg')} /><img src={img('images/196338725_431547418220873_4435588049436418993_n.jpeg')} /></div>
  </>}
];

function AboutTabs(){ const [active,setActive]=useState('who'); const t=tabs.find(x=>x.id===active); return <div className="tabs"><nav>{tabs.map(tab=><button key={tab.id} className={active===tab.id?'active':''} onClick={()=>setActive(tab.id)}>{tab.title}</button>)}</nav><article>{t.content}</article></div>}

function App(){
return <>
<header className="site-header"><a className="brand" href="#top"><img src={img('common/logo.png')} alt="אבטיפוס" /></a><nav className="main-nav"><a href="#shows">הופעות</a><a href="#about">אודות</a><a href="#contact">יצירת קשר</a></nav></header>
<main id="top">
<section className="hero">
  <div className="hero-bg"></div>
  <div className="hero-card">
    <img src={img('common/logo.png')} alt="אבטיפוס"/><div className="social">
      <a href="https://www.facebook.com/avtipusband">f</a>
      <a href="https://twitter.com/avtipus">t</a>
      <a href="https://www.instagram.com/avtipus/">◎</a>
      <a href="https://www.youtube.com/results?search_query=%D7%90%D7%91%D7%98%D7%99%D7%A4%D7%95%D7%A1">▶</a>
    </div>
  </div>
</section>
<section id="shows" className="section">
  <h1>הופעות</h1>
  <div className="shows">
    <p>כרגע עיקר הפעילות שלנו היא בפרוייקט <a href="https://www.facebook.com/hapatrikim"><strong>הפטריקים</strong></a></p>
    <hr/>
    <p>להזמנת הופעות של אבטיפוס: פיטרסון הפקות 054-5242787</p>
  </div>
</section>
<section id="about" className="section about"><h1>אודות</h1><AboutTabs/></section>
<section id="contact" className="section contact"><h1>יצירת קשר</h1><p>ליצירת קשר עם אבטיפוס:</p><MailLink/></section>
</main><footer><div className="social"><a href="https://www.facebook.com/avtipusband">f</a><a href="https://twitter.com/avtipus">t</a><a href="https://www.instagram.com/avtipus/">◎</a><a href="https://www.youtube.com/results?search_query=%D7%90%D7%91%D7%98%D7%99%D7%A4%D7%95%D7%A1">▶</a></div></footer>
</>}

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